CSS3- 圆角效果 border-radius

border-radius 可以为元素的添加圆角边框

使用方法: 首先为页面添加一个块状div

<div class="radius"></div>

.radius {
width: 100px;
height: 100px;
background: #9da;
}

border-radius 属性有4个复合属性: border-radius: 5px 5px 5px 5px;

这四个复合属性从左到右排序分别对应左上、右上、右下、左下.

当四个复合属性都相同的话可以简写为: border-radius: 5px; 

当左上与右下, 右上与左下(它们之间的关系就是交叉对角关系)分别都相同的时候: border-radius: 2px 4px 2px 4px; 

那么上式可简写为: border-radius: 2px 4px;

除了可以使用px单位, 也可以使用em或百分比.

.radius {
width: 100px;
height: 100px;
background: #9da;
border-radius: 5px 5px 5px 5px;/* 简写: border-radius: 5px; */
}

左上:

border-radius: 5px 0 0 0;

除了可以为边框画圆角, 还可以使用它来实现画圆.

实心圆:

border-radius: 50px;

左半圆:

.radius {
width: 50px;
height: 100px;
background: #9da;
border-radius: 50px 0 0 50px;
}

上半圆:

.radius {
width: 100px;
height: 50px;
background: #9da;
border-radius: 50px 50px 0 0;
}