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:
10px
20px
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