首页 > 代码库 > CSS border-radius 圆角

CSS border-radius 圆角

2024-07-22 16:24:14   220人阅读

本文转自：http://www.kwstu.com/Admin/ViewArticle/201409151549476225

border-radius属性主要用于设置div圆角效果。

使用方法

border-radius:圆角的半径值+单位; 

例1 设置一个div圆角半径为10像素

border-radius: 10px;设置对象圆角半径为10像素。

效果截图：
border-radius可以同时设置1到4个值
1、如果设置1个值，表示4个圆角都使用这个值。
2、如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。
3、如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。
4、如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
例2 同时设置两个值效果

border-radius: 10px 5px;

效果截图：
例3 同时设置三个值效果 

border-radius: 20px 10px 5px;

效果截图：
例4 同时设置四个值效果  

 border-radius: 30px 20px 10px 5px;

效果截图：
单个圆角的设置 
1、border-top-left-radius
2、border-top-right-radius
3、border-bottom-right-radius
4、border-bottom-left-radius 
注：这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
 例5 单个属性设置1个值

border-top-left-radius: 10px;  

效果截图：
 例6 单个属性设置2个值

border-top-left-radius: 10px 5px;   

效果截图：
支持浏览器

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性,为了保证兼容性，需要同时设置-moz-border-radius和border-radius。
-moz-border-radius: 15px;
border-radius: 15px;
注意：border-radius必须放在最后声明，否则可能会失效。
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
-moz-border-radius-topleft（标准语法：border-top-left-radius）
-moz-border-radius-topright（标准语法：border-top-right-radius）
-moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
-moz-border-radius-bottomright（标准语法：border-bottom-right-radius）

建议：因浏览器不同，如果单独设置每个圆角边框的风格和宽度各大浏览器的显示效果可能不一致，目前最安全的做法，就是将每个圆角边框的风格和宽度，都设为一样的值，并且避免使用百分比值。

CSS border-radius 圆角


联系
我们