CSS | border-top-left-radius 属性

border-top-left-radius 属性用于设置元素的左上角边框的圆角半径。

语法

border-top-left-radius: <length> | <percentage> | inherit

该属性可以取三种不同的值：

• <length>：用指定的长度值来设置边框的圆角半径。
• <percentage>：用相对于元素宽度的百分比值来设置边框的圆角半径。
• inherit：继承父元素的 border-top-left-radius 属性值。

示例

div {
  border-top-left-radius: 10px;
}

上面的示例代码会将 <div> 元素的左上角边框设置为 10 像素的圆角。

多个值

border-top-left-radius 属性也可以接受两个值来分别设置水平方向和垂直方向的圆角半径。

div {
  border-top-left-radius: 10px 5px;
}

上面的示例将 <div> 元素的左上角边框在水平方向上设置为 10 像素的圆角半径，在垂直方向上设置为 5 像素的圆角半径。

使用百分比值

我们也可以使用相对于元素宽度的百分比值来动态地设置边框的圆角半径。

div {
  border-top-left-radius: 50%;
}

上面的代码会将 <div> 元素的左上角边框的圆角半径设置为其宽度的 50%。

兼容性

border-top-left-radius 属性的兼容性非常好，几乎所有主流浏览器都支持。

• Chrome
• Firefox
• Safari
• Edge
• Opera

总结

通过使用 border-top-left-radius 属性，我们可以轻松地为元素的左上角边框添加圆角效果。可以使用像素值或百分比值来设置圆角半径。该属性在网页布局和设计中非常有用，并且兼容性良好。

更多关于 border-top-left-radius 属性的详细信息，请参考 MDN 文档。