CSS3 边框 - border-radius

CSS3 边框

• border-radius
• box-shadow
• border-image

 Internet Explorer 9+

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

border-radius

border-radius: 2em 1em 5em 4em;

  
  

   
   
eg01:  border-radius:2em

  
  

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;




 eg02:  border-radius:2em 5em;




等价于

border-top-left-radius:2em;
border-top-right-radius:5em;
border-bottom-right-radius:2em;
border-bottom-left-radius:5em;







 eg03:  border-radius:2em 5em 8rem;




等价于

border-top-left-radius:2em;
border-top-right-radius:5em;
border-bottom-right-radius:8em;
border-bottom-left-radius:5em;





eg04：
border-radius:2em 1em 5em 4rem/0.5em 3rem 2em 4em;
/*以斜杠 / 分开后面的参数的意思是：第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，这样可以画一个不对称的圆角辣*/
















等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 5em 2em;
border-bottom-left-radius: 4em 4em;





通常我们很少写斜杠 / 右边的参数，那就是默认右边等于左边的值。你也可以省略一些值，比如这样子写

border-radius: 2em 1em 4em / 0.5em 3em;