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的样式属性，让开发者可以更加灵活地控制元素的样式。