（22）css3新增边框圆角属性border-radius

1.边框圆角属性border-radius使用

作用：设置边框的圆角。  

属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

示例1： 

 示例2： 

示例3：

当border-radius属性值为盒子的宽高度的一半，它就是一个圆形，只要值取值为50px及以上都是该效果，不会再进行更改。可以说是50px是最终结果了，再加像素也是按照50px进行加载。

注意：但是如上示例3不是最好的画圆形的方式，因为它如果存在其他属性，例如内边距，我们还需要给border-radius属性加上改内边距的像素值。

 

 示例4：

当border-radius的属性值设置为50%时，也是可以同样实现圆形效果。 

2.单一属性 

• border-top-left-radius: 半径;
• border-top-right-radius: 半径;
• border-bottom-right-radius: 半径;
• border-bottom-left-radius: 半径;

3.简写方法

• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
• border-radius: 左上角 右上角 右下角 左下角; 
• border-radius: 左上角 右上角和左下角 右下角 ;
• border-radius: 左上角和右下角 右上角和左下角 ;
• border-radius: 四个角相同;

3.1border-radius四值法

3.2border-radius三值法 

 3.3border-radius二值法 

 

3.4border-radius单值法 

4./ 的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。

5.浏览器兼容

InternetExplorer8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。