CSS3 border-top-left-radius 属性

border-top-left-radius 属性用于设置一个元素的左上角边框的圆角半径。这个属性通常与 border-radius 属性一起使用，可以为一个元素的四个角分别设置不同的圆角半径。

语法

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

• <length>：指定一个固定的长度值，如像素（px）、厘米（cm）等。
• <percentage>：指定一个相对于包含块宽度的百分比值。
• inherit：继承父元素的值。

值

• <length>：可以是正数、负数或零。当值为负数时，表示相对于其相对应的边框框的绝对值。
• <percentage>：可以是一个介于 0% 和 100% 之间的值。

示例

div {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  border-top-left-radius: 20px;
}

在上面的示例中，我们为一个 div 元素设置了 border-top-left-radius 为 20 像素，这将使该元素的左上角边框呈现为一个 20 像素的圆角。

注意事项

• 当使用百分比值时，border-top-left-radius 属性的计算依赖于其包含块的宽度。因此，如果包含块的宽度发生变化，圆角的大小也会相应地改变。
• 如果同时设置了 border-radius 和 border-top-left-radius 属性，border-top-left-radius 的值将覆盖 border-radius 的左上角圆角值。

以上就是关于 border-top-left-radius 属性的详细介绍，希望能帮助你更好地掌握 CSS 样式设计中的圆角边框设置。