CSS3 border-top-left-radius 属性
CSS3 border-top-left-radius属性
CSS3 border-top-left-radius属性定义一个元素框的左上角的弧形边框半径。
语法
border-top-left-radius: length|percentage [length|percentage]?
属性值
值 | 描述 |
---|---|
length | 以px, pt等为单位的长度值,表示半径的大小 |
percentage | 以%为单位的值,根据容器尺寸计算计算半径大小 |
注:当提供两个值时,第一个值指定水平半径,第二个值指定垂直半径,如果省略第二个值,则使用第一个值。
示例
div {
border-top-left-radius: 20px;
}
效果:左上角的角会变得圆润。
div {
border-top-left-radius: 20px 10px;
}
效果:左上角的角会变得和椭圆形一样。
注意事项
- 该属性只适用于border-box模型,不适用于content-box模型。
- 可以将其与border-radius属性结合使用,实现圆角矩形的需求。
- Safari需要加上-webkit-前缀,Opera需要加上-moz-前缀,IE9以上支持该属性。
总结
CSS3 border-top-left-radius属性可以实现左上角的圆角效果,使用时需要注意是否与其他样式冲突,以及不同浏览器需要加上不同的前缀。该属性的出现丰富了CSS的样式属性,让开发者可以更加灵活地控制元素的样式。