CSS - border-block-style 属性

CSS border-block-style 属性确定块方向上的逻辑块边框，受书写模式（水平和垂直）的影响。如果指定了两种样式，则第一种应用于起始边框，第二种应用于结束边框。如果只给出了一种样式，则它应用于两个边框。

语法

border-block-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-block-style 属性。

无边框边框块样式

为了避免在 border-block 处出现边框，我们使用 none 值。在以下示例中，none 值已与 border-block-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 2px solid black;
         padding: 10%;
         border-block-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with none value.
   </p>
</body>

</html>

隐藏边框块样式

要设置隐藏边框块，我们使用 hidden 值。这使得边框占用空间，但保持不可见。以下示例显示了此效果，其中红色指示线突出显示了隐藏的边框。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 300px;
         padding: 10%;
         border: 2px solid black;
         position: relative;
         margin-bottom: 20px;
      }

      .none {
         border-block-style: none;
      }

      .hidden {
         border-block-style: hidden;
      }

      .indicator {
         background-color: grey;
         height: 5px;
         width: 100%;
         position: absolute;
         left: 0;
         display: none;
      }

      .show-indicator .indicator-top {
         top: 0;
         display: block;
      }

      .show-indicator .indicator-bottom {
         bottom: 0;
         display: block;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <div class="container none">
      Border Block Style: none
   </div>
   <div class="container hidden show-indicator">
      Border Block Style: hidden
   <div class="indicator indicator-top">
   </div>
   <div class="indicator indicator-bottom">
   </div>
   </div>
</body>

</html>

点状边框块样式

要获得点状边框块，我们使用 dotted 值。在以下示例中，dotted 值已与 border-block-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with dotted value.
   </p>
</body>

</html>

虚线边框块样式

要获得虚线边框块，我们使用 dashed 值。在以下示例中，dashed 值已与 border-block-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with dashed value.
   </p>
</body>

</html>

实线边框块样式

要获得实线边框块，我们使用 solid 值。在以下示例中，solid 值已与 border-block-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with solid value.
   </p>
</body>

</html>

双线边框块样式

要获得双线边框块，我们使用 double 值。在以下示例中，double 值已与 border-block-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 6px solid black;
         padding: 10%;
         border-block-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with double value.
   </p>
</body>

</html>

凹槽边框块样式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid red;
         padding: 10%;
         border-block-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with groove value.
   </p>
</body>

</html>

脊状边框块样式

要获得 3D 脊状边框块，我们使用 ridge 值。此效果取决于 border-color。在以下示例中，ridge 值已与 border-block-style 属性一起使用，边框颜色为黄色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid yellow;
         padding: 10%;
         border-block-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">T
      This shows the border-block-style
      property with ridge value.
   </p>
</body>

</html>

内嵌边框块样式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid orange;
         padding: 10%;
         border-block-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with inset value.
   </p>
</body>

</html>

外凸边框块样式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
            border: 20px solid green;
            padding: 10%;
            border-block-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with outset value.
   </p>
</body>

</html>

带书写模式的边框块样式

书写模式会影响 border-block-style 属性，因为它确定边框的方向。水平模式用于顶部和底部边框，垂直模式用于右侧和左侧边框。这些在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #horizontal {
         border: 1px solid black;
         padding: 8%;
         writing-mode: horizontal-tb;
         border-block-width:5px;
         border-block-style: dashed dotted;
      }

      #vertical {
         border: 1px solid black;
         padding: 8%;
         writing-mode: vertical-rl;
         border-block-width:5px;
         border-block-style:dashed dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p id="horizontal">
      This shows the border-block-style property 
      with dashed and dotted style in horizontal mode.
   </p>
   <p id="vertical">
      This shows the border-block-style property 
      with dashed and dotted style in vertical mode.
   </p>
</body>

</html>

支持的浏览器

属性
border-block-style	69.0	79.0	41.0	12.1	56.0

css_properties_reference.htm

打印页面