CSS border-left 属性

CSS border-left 属性

CSS border-left 属性控制文本块左侧边框的样式、宽度和颜色。

语法

border-left-color: value;
border-left-style: value;
border-left-width: value;

属性值

  • border-left-color: 定义边框左侧的颜色值。默认值为 “initial”，意味着它继承自父元素。其他合法值包括具体的颜色名称、十六进制值、RGB值等。

  • border-left-style: 定义边框左侧的样式。默认值为 “none”。其他合法值包括 “dotted”（虚线）、“dashed”（破折号）、“solid”（实线）、“double”（两条实线）等。

  • border-left-width: 定义边框左侧的宽度。默认值为 “medium”，意味着边框宽度为 3px。其他合法值包括具体的像素值或百分比、“thin”（1px）、“thick”（5px）等。

继承性

CSS border-left 属性是可继承的，意味着子元素会继承父元素的边框左侧样式、宽度和颜色，除非子元素重新定义了这些属性。

用法示例

  1. 将文本块左侧边框设置为实线、红色、10像素粗：
p {
   border-left-style: solid;
   border-left-color: red;
   border-left-width: 10px;
}
  1. 将文本块左侧边框设置为虚线、绿色、1像素粗：
p {
   border-left-style: dotted;
   border-left-color: green;
   border-left-width: 1px;
}
  1. 将表格左侧边框设置为双线、黑色、5像素粗：
table {
   border-left-style: double;
   border-left-color: black;
   border-left-width: 5px;
}

兼容性

CSS border-left 属性在大部分现代浏览器中都被支持。但是，某些较老的浏览器可能无法正确渲染该属性的某些值。为了确保跨浏览器兼容性，可以使用浏览器前缀或后备方案。

CSS border-color 属性 CSS border-left-color 属性