HTML | DOM 样式 borderTopLeftRadius 属性

简介

borderTopLeftRadius 属性用于设置元素的上左角的边框圆角半径。它允许我们通过更改圆角半径的值来使元素的角变得圆滑。

该属性可应用于所有块级元素，内联块级元素和替换元素。

语法

selector {
  border-top-left-radius: value;
}

值

border-top-left-radius 属性接受以下一种或多种值：

• length：指定边框圆角的直径，可以使用像素（px）、百分比（%）或其他长度单位。
• percentage：相对于元素尺寸的百分比值，以元素宽度的百分比和高度的百分比形式指定。
• initial：默认值，表示将边框圆角设置为其初始值。
• inherit：继承父级元素的边框圆角值。

示例

/* 设置上左角的边框圆角为 10px */
.box {
  border-top-left-radius: 10px;
}

/* 设置上左角的边框圆角为元素宽度的 50% */
.circle {
  border-top-left-radius: 50%;
}

注意事项

• border-top-left-radius 属性不会影响元素内部的任何内容，仅影响元素的外观。
• 如果使用了 border-collapse 属性将边框合并，那么 border-top-left-radius 将无效。
• 圆角值较小的元素与值较大的元素进行重叠时，边界处可能出现无法预期的效果。

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