详解css3属性border-radius

港控/mmm° 2023-06-13 08:58 11阅读 0赞

当时写这篇[文章][Link 1]主要是想探讨一下优雅降级和渐进增强的区别，按照正常的逻辑思维，不管是降级还是增强，应该对于效果是没什么区别的，因为后者会覆盖前者，但今天无意看到张鑫旭的一篇文章，关于CSS3属性的书写顺序（10年的，原谅我的孤陋寡闻T\_T），标准的css3属性和带webkit的前缀在某些情况是不一样的效果，比如border-radius和-webkit-border-radius带两个参数时，显示的效果并不一样：

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td> 
    <div> 
     <div> 
      <code>.not-a-</code> 
      <code>square</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>30px</code> 
      <code>10px</code> 
      <code>; </code> 
      <code>/*让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧*/</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>30px</code> 
      <code>10px</code> 
      <code>; </code> 
      <code>/*box渲染为每个角都是30像素宽10像素高的圆弧*/</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

展示结果（直接借图啦，当然本鱼也实践过了，确实如此~）：

![2010-09-21_171216.png][]

顺便带出一下border-radius的参数：

据w3c上的官方解释，是这样子的：

border-radius: 1-4 length|% / 1-4 length|%;
    1-4指的是radius的四个值，length和%指的是值的单位。

写过border的人都知道border可以带四个参数分别设置四个边框（上左下右的顺序），同样的，border-radius也可以带四个参数，并且以顺时针的方向解析，上左，上右，下右，下左：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>.box{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>5px</code> 
      <code>10px</code> 
      <code>20px</code> 
      <code>50px</code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

展示结果：

![081810382548582.gif][]

两个参数的时候，是上左和下右，上右和下左，比如.div1\{border-radius: 2em 1em\}，就不截图了，直接[demo][]

三个参数的时候，是上左，上右和下左，下右，比如.div1\{border-radius: 2em 1em 3em\}，[demo][demo 1]

那么以斜杠/分开后面的参数是怎么回事呢？是这样子的，第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，所以你现在就可以画一个左右不对称的圆角啦：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>.div</code> 
      <code>1</code> 
      <code>{border-radius: </code> 
      <code>2em</code> 
      <code>/</code> 
      <code>1em</code> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

![081816125981660.gif][]

看到这里你会不会以如果四个圆角都要分别制定特殊的形状，是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那个四个参数一样的设定（我就是这么以为的），答案是错！误！的！因为官方的解释就是前面放1-4后面放1-4啊！鱼不是被吃掉的就是被笨s的~

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>.div</code> 
      <code>1</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius:</code> 
      <code>10px</code> 
      <code>20px</code> 
      <code>30px</code> 
      <code>40px</code> 
      <code>/</code> 
      <code>40px</code> 
      <code>30px</code> 
      <code>20px</code> 
      <code>10px</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

![081838116298998.gif][]

按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。当然你也可以省略一些值，比如这样子写.div1\{border-radius: 2em 1em 4em / 0.5em 3em;\}，解析顺序你就可以按照上面的自己推算一下啦。

然后再回到张老师的那个-weibkit前缀下的问题\{-webkit-border-radius:30px 10px\}实际上就等于\{border-radius:30px/10px\}，效果是一样的，至于为什么，我也还不知道，张老师说background-image也有此问题，姐明天再瞧瞧，back home~

[Link 1]: http://www.cnblogs.com/mofish/p/3822879.html
[2010-09-21_171216.png]: http://image.zhangxinxu.com/image/blog/201009/2010-09-21_171216.png
[081810382548582.gif]: https://images0.cnblogs.com/i/125698/201407/081810382548582.gif
[demo]: http://jsfiddle.net/U5U8s/46/
[demo 1]: http://jsfiddle.net/U5U8s/47/
[081816125981660.gif]: https://images0.cnblogs.com/i/125698/201407/081816125981660.gif
[081838116298998.gif]: https://images0.cnblogs.com/i/125698/201407/081838116298998.gif