一、 borderradius属性
border-radius属性用来为元素定义圆角,可设定1到4个值。当为1个值时,表示四个角的弧度相等;为2个值时,第一个值表示左上角和右下角,第二个值表示右上角和左下角的弧度值;为3个值时,第一个值表示左上角的弧度,第二个值表示右上角和左下角的弧度,第三个值表示右下角的弧度。
.example { border-radius: 10px; } .example2 { border-radius: 10px 5px 15px 20px; }
二、 borderradius50%和100%
borderradius50%让元素呈现圆角效果,圆角的半径是相对于元素宽度的百分比值,而borderradius 100%会让元素成为一个圆形。
.example { border-radius: 50%; } .example2 { border-radius: 100%; }
三、 borderradius 5ps
borderradius 5px表示元素四个角圆角的半径均为5px。
.example { border-radius: 5px; }
四、 border-radius
border-radius是CSS3中的一个新属性,可以同时设定圆角的横向半径和纵向半径,值可以为1到4个。第一个值表示左上角,第二个值表示右上角,第三个值表示右下角,第四个值表示左下角。
.example { border-radius: 10px 5px 15px 20px / 20px 15px 5px 10px; }
五、 border-radius用法
border-radius用法非常灵活,可以与其他CSS属性组合使用,来达到丰富的效果。如:用background-color属性与border-radius属性来创建一个纯CSS的气泡提示框。
.example { background-color: #f2f2f2; border-radius: 10px; padding: 20px; } .example:before { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -15px; border-width: 15px; border-style: solid; border-color: transparent transparent #f2f2f2 transparent; border-radius: 2px; }
六、 radius
radius是一个简写属性,可以同时设定box-shadow属性和border-radius属性。
.example { box-shadow: 5px 5px 5px #888888; border-radius: 10px; } .example2 { radius: 5px 10px 15px / 20px 25px 30px; }
七、 border-radius属性
border-radius属性不生效的原因可能有很多种,常见的原因包括:元素被float或position:absolute固定位置,元素的高度或宽度被设置为0,元素的父元素没有设置border-radius,元素没有内容。解决方法是检查代码是否有以上问题,再根据问题进行相应的修复。
.example { border-radius: 10px; float: left; }以上就是关于border-radius属性的详细介绍,希望对大家理解border-radius属性有所帮助。