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

列印頁面