CSS3利用border-radius实现边框圆角

1、border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：

.demo {

border-radius:10px;

}

效果：

 

2、border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同

.demo {

border-radius:10px 20px;

}

等价于：

.demo {

border-top-left-radius:10px;

border-bottom-right-radius:10px;

border-top-right-radius:20px;

border-bottom-left-radius:20px;

}

效果：

 

3、border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值：

.demo {

border-radius:10px 20px 30px;

}

等价于：

.demo {

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottom-left-radius:20px;

border-bottom-right-radius:30px;

}

效果：

 

 

4、border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值：

.demo {

border-radius:10px20px 30px 40px;

}

等价于：

.demo {

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottom-right-radius:30px;

border-bottom-left-radius:40px;

}

效果：

 

实例说明

从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.

 

 

参考资料：  CSS3 border-radius实现边框圆角   http://www.studyofnet.com/news/276.html