CSS - border-bottom-style 属性

上一页
下一页

CSS border-bottom-style 属性设置元素底部边框的样式。

语法

border-bottom-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 值。
inherit 从父元素继承此属性。

CSS 底部边框样式属性示例

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

无底部边框样式

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

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: none;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style without bottom border
   </h3>
   <p>
      Border Bottom Style without bottom border
   </p>
</body>

</html>

隐藏底部边框样式

要设置隐藏的底部边框，我们使用 hidden 值。这使得边框占用空间但保持不可见。以下示例显示了此效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         padding: 10px;
         border: 5px solid;
      }

      .none {
         border-bottom-style: none;
         background-color: lightgray;
      }

      .transparent {
         border-bottom-style: solid;
         border-bottom-color: transparent;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style Property
   </h2>
   <p>
      Border Bottom Style with none value
   </p>
   <div class="box none">
      Border Bottom Style: none
   </div>
   <p>
      Border Bottom Style with transparent value
   </p>
   <div class="box transparent">
      Border Bottom Style: 
      transparent
   </div>
</body>

</html>

点状底部边框样式

要使底部边框为点状，我们使用 dotted 值。在以下示例中，使用 dotted 值与 border-bottom-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: dotted;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with dotted border
   </h3>
   <p>
      Border Bottom Style with dotted border
   </p>
</body>

</html>

虚线底部边框样式

要使底部边框为虚线，我们使用 dashed 值。在以下示例中，使用 dashed 值与 border-bottom-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: dashed;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with dashed border
   </h3>
   <p>
      Border Bottom Style with dashed border
   </p>
</body>

</html>

实线底部边框样式

要使底部边框为实线，我们使用 solid 值。在以下示例中，使用 solid 值与 border-bottom-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: solid;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with solid border
   </h3>
   <p>
      Border Bottom Style with solid border
   </p>
</body>

</html>

双线底部边框样式

要使底部边框为双线，我们使用 double 值。在以下示例中，使用 double 值与 border-bottom-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: double;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with double border
   </h3>
   <p>
      Border Bottom Style with double border
   </p>
</body>

</html>

凹槽底部边框样式

要使底部边框为 3D 凹槽，我们使用 groove 值。此效果取决于 border-color。在以下示例中，使用 groove 值与 border-bottom-style 属性一起使用，并使用红色边框颜色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: groove;
      }

      h3 {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with groove border
   </h3>
   <p>
      Border Bottom Style with groove border
   </p>
</body>

</html>

凸脊底部边框样式

要使底部边框为 3D 凸脊，我们使用 ridge 值。此效果取决于 border-color。在以下示例中，使用 ridge 值与 border-bottom-style 属性一起使用，并使用黄色边框颜色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: ridge;
      }

      h3 {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with ridge border
   </h3>
   <p>
      Border Bottom Style with ridge border
   </p>
</body>

</html>

内嵌底部边框样式

要使底部边框为 3D 内嵌，我们使用 inset 值。此效果取决于 border-color。在以下示例中，使用 inset 值与 border-bottom-style 属性一起使用，并使用橙色边框颜色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: inset;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with inset border
   </h3>
   <p>
      Border Bottom Style with inset border
   </p>
</body>

</html>

外凸底部边框样式

要使底部边框为 3D 外凸，我们使用 outset 值。此效果取决于 border-color。在以下示例中，使用 outset 值与 border-bottom-style 属性一起使用，并使用绿色边框颜色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: outset;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with outset border
   </h3>
   <p>
      Border Bottom Style with outset border
   </p>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border-bottom-style 1.0 5.5 1.0 1.0 9.2
css_properties_reference.htm
打印页面
上一页
下一页
广告

© . All rights reserved.