CSS - border-left-style 属性

CSS border-left-style 属性仅设置元素左侧边框的样式。

语法

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

属性值

值	描述
none	指定无边框。默认值。
hidden	类似于 none，但用于表格元素的边框冲突解决。
dotted	指定点状边框。
dashed	指定虚线边框。
solid	指定实线边框。
double	指定双线边框。
groove	指定 3D 凹槽边框。效果取决于 border-color 值。
ridge	指定 3D 脊状边框。效果取决于 border-color 值。
inset	指定 3D 内嵌边框。效果取决于 border-color 值。
outset	指定 3D 外凸边框。效果取决于 border-color 值。
initial	将属性设置为默认值。
inherit	从父元素继承该属性。

CSS 左边框样式属性示例

以下示例使用不同的值解释了 border-left-style 属性。

无左边框样式

要没有左边框，我们使用 none 值。在以下示例中，使用了 none 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: none;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'none' left border style
      </h1>
      <p class="border-none">
         This border has 'none' left border style
      </p>
   </div>
</body>

</html>

透明左边框样式

要有一个存在的但不可见的边框，我们可以使用 transparent 值。transparent 值创建不可见的边框，而 none 值则创建无边框。此差异在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid silver;
         border-left-style: none;
      }

      .border2 {
         border: 8px solid silver;
         border-left-color: gold;
         border-left-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have left border
         indicated by the gap.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has an invisible border. Since the border
         exist, the border color is applied to it 
         indicated by the gold color.
      </p>
   </div>
</body>

</html>

点状左边框样式

要创建点状左边框，我们使用 dotted 值。在以下示例中，使用 dotted 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: dotted;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'dotted' left border style
      </h1>
      <p class="border-none">
         This border has 'dotted' left border style
      </p>
   </div>
</body>

</html>

虚线左边框样式

要创建虚线左边框，我们使用 dashed 值。在以下示例中，使用 dashed 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: dashed;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'dashed' left border style
      </h1>
      <p class="border-none">
         This border has 'dashed' left border style
      </p>
   </div>
</body>

</html>

实线左边框样式

要创建实线左边框，我们使用 solid 值。在以下示例中，使用 solid 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: solid;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'solid' left border style
      </h1>
      <p class="border-none">
         This border has 'solid' left border style
      </p>
   </div>
</body>

</html>

双线左边框样式

要创建双线左边框，我们使用 double 值。在以下示例中，使用 double 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: double;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'double' left border style
      </h1>
      <p class="border-none">
         This border has 'double' left border style
      </p>
   </div>
</body>

</html>

凹槽左边框样式

要创建凹槽左边框，我们使用 groove 值。在以下示例中，使用 groove 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: groove;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'groove' left border style
      </h1>
      <p class="border-none">
         This border has 'groove' left border style
      </p>
   </div>
</body>

</html>

脊状左边框样式

要创建脊状左边框，我们使用 ridge 值。在以下示例中，使用 ridge 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: ridge;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'ridge' left border style
      </h1>
      <p class="border-none">
         This border has 'ridge' left border style
      </p>
   </div>
</body>

</html>

内嵌左边框样式

要创建内嵌左边框，我们使用 inset 值。在以下示例中，使用 inset 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: inset;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'inset' left border style
      </h1>
      <p class="border-none">
         This border has 'inset' left border style 
      </p>
   </div>
</body>

</html>

外凸左边框样式

要创建外凸左边框，我们使用 outset 值。在以下示例中，使用 outset 值与 border-left-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: outset;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'outset' left border style
      </h1>
      <p class="border-none">
         This border has 'outset' left border style
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
border-left-style	1.0	5.5	1.0	1.0	9.2

css_properties_reference.htm

打印页面