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属性,其他浏览器都支持。