CSS - border-left 属性

CSS border-left 属性是定义 border-left-width、border-left-style 和 border-left-color 属性值的简写形式，在一个声明中定义这三个属性。 border-left-style 属性是必需的。如果未指定颜色和宽度，将使用默认值。

语法

border-left: border-width border-style border-color | initial | inherit;

属性值

值	描述
border-left-width	指定元素左边框的宽度。可选。默认值为 medium。
border-left-style	指定元素左边框的样式。必需。默认值为 none。
border-left-color	指定元素左边框的颜色。可选。默认值为文本颜色。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS 左边框属性示例

以下示例说明了使用不同值的 border-left 属性。

定义左边框属性的所有值

要在一个声明中定义 border-left-width、border-left-style 和 border-left-color 的值，可以使用 border-left 属性。该属性需要三个值，第一个值用于宽度，第二个值用于样式，第三个值用于颜色。以下示例演示了如何执行此操作。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .properties {
         text-align: center;
         padding: 20px;
      }

      .example1 {
         background-color: lightgreen;
         border-left: blue 15px solid;
      }

      .example2 {
         border: 2px solid black;
         border-left: 5px dashed red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left property
   </h2>
   <h4 class="properties example1">
      This shows a blue left border 
      for a 'h4' tag
   </h4>
   <p class=" properties example2">
      This shows a 'red' left border 
   </p>
</body>

</html>

左边框属性的组成属性

border-left 属性是 border-left-width、border-left-style 和 border-left-color 属性的组合。以下示例演示了如何组合使用这些属性来显示 border-left 属性效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .properties {
         text-align: center;
         padding: 20px;
      }

      .example1 {
         background-color: lightgray;
         border-left-width: 15px;
         border-left-style: solid;
         border-left-color: green;
      }

      .example2 {
         border: 2px solid black;
         border-left-width: 25px;
         border-left-style: solid;
         border-left-color: brown;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left property
   </h2>
   <h4 class="properties example1">
      This shows a green left border for a 'h4' tag
   </h4>
   <p class="properties example2">
      This shows a 'brown' left border 
   </p>
</body>

</html>

支持的浏览器

属性
border-left	1.0	4.0	1.0	3.5	1.0

css_properties_reference.htm

打印页面