CSS3属性之圆⾓效果——border-radius属性
在css3之前，要实现圆⾓的效果可以通过图⽚或者⽤margin属性实现(可以参考这⾥：)。实现过程很繁琐，但CSS3的到来简化了实现圆⾓的⽅式。
CSS3实现圆⾓需要使⽤border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。
1 2 3 4-webkit-border-radius -moz-border-radius -ms-border-radius
-o-border-radius
　border-radius属性其实可以分为四个其他的属性：
1 2 3 4 5border-radius-top-left/*左上⾓*/ border-radius-top-right/*右上⾓*/ border-radius-bottom-right/*右下⾓*/ border-radius-bottom-left/*左下⾓*/ //提⽰：按顺时针⽅式
下⾯⽤⼏个实例来展⽰border-radius的具体⽤法。
1、border-radius单个属性值：
1 2//HTML清单
<div class="roundedCorner">
1 2 3 4 undedCorner{
width:100px;
height:100px;
background-color:#f90;
border-radius:10px;//左上，右上，右下，坐下都是10px }
效果：
2、border-radius是个属性值⽅式：
1 2 3 4 5 6 7<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单.roundedCorner2{
width:100px;
height:100px;
background-color:#f99;
border-radius:20px10px5px2px;
}
　效果：
不过在开发的过程中(我的⼯作中)，经常⽤到的是border-radius单属性值，设置4个不同圆⾓的情况很少。border-radius的优势不仅仅在制作圆⾓的边框，还是利⽤border-radius属性来画圆和半圆。
1、制作半圆的⽅法：
元素的⾼度是宽度的⼀半，左上⾓和右上⾓的半径元素的⾼度⼀致（⼤于⾼度也是可以的，⾄少为height值）。
1 2 3 4 5 6 7<div class="semi-circle"></div>
.semi-circle{
width:100px;
height:50px;//⾼度是宽度的⼀半
background-color:#000;
border-radius:50px50px00;//左上和右上⾄少为height值}
效果:　
知道了如何画上半圆，就会举⼀反三画其他⽅向的圆了，这⾥不再赘述。
2、画实⼼圆的⽅法：
宽度和⾼度⼀致(正⽅形)，然后四个⾓设置为⾼度或者宽度的1/2.
1 2 3 4 5 6 7<div class="circle"></div> .circle{
width:100px;
height:100px;
background-color:#cb18f8;    border-radius:50px;
}
效果：
总结：
CSS3实现圆⾓的⽅式既优雅⼜⽅便，但是兼容性不够好，如果需要考虑旧版本的浏览器的话，可以考虑优雅降级的⽅式。开始提到的两种⽅式的优点是兼容性好，但不够优雅。
据w3c上的官⽅解释，是这样⼦的：
border-radius: 1-4 length|% / 1-4 length|%;border radius什么意思
1-4指的是radius的四个值，length和%指的是值的单位。
写过border的⼈都知道border可以带四个参数分别设置四个边框（上左下右的顺序），同样的，border-radius也可以带四个参数，并且以顺时针的⽅向解析，上左，上右，下右，下左：
1 2 3.box{
border-radius: 5px10px20px50px }
展⽰结果：
两个参数的时候，是上左和下右，上右和下左，⽐如.div1{border-radius: 2em 1em}，就不截图了，直接
三个参数的时候，是上左，上右和下左，下右，⽐如.div1{border-radius: 2em 1em 3em}，
那么以斜杠/分开后⾯的参数是怎么回事呢？是这样⼦的，第⼀个参数表⽰圆⾓的⽔平半径，第⼆个参数表⽰圆⾓的垂直半径，所以你现在就可以画⼀个左右不对称的圆⾓啦：
1.div1{border-radius: 2em/1em}
看到这⾥你会不会以如果四个圆⾓都要分别制定特殊的形状，是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上⾯那个四个参数⼀样的设定（我就是这么以为的），答案是错！误！的！因为官⽅的解释就是前⾯放1-4后⾯放1-4啊！鱼不是被吃掉的就是被笨s的~
1 2 3.div1{
border-radius:10px20px30px40px/40px30px20px10px }
按顺时针的顺序，斜杠/左边是四个圆⾓的⽔平半径，右边是四个圆⾓的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。当然你也可以省略⼀些值，⽐如这样⼦写.div1{border-radius: 2em 1em 4em / 0.5em 3em;}，解析顺序你就可以按照上⾯的⾃⼰推算⼀下啦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。