CSS - border-block-width 属性

CSS border-block-width 属性确定逻辑块边框宽度，并根据元素的书写模式、方向和文本方向转换为物理边框宽度。

语法

border-block-width: medium | thin | thick | length | initial | inherit;

属性值

值	描述
medium	指定中等边框宽度。默认值。
thin	指定细边框。
thick	指定粗边框。
length	厚度可以用数值形式给出。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 块级边框宽度属性示例

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

中等块级边框宽度

要为 border-block-width 设置中等边框，我们使用 medium 值。在以下示例中，使用了 medium 值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

细块级边框宽度

要为 border-block-width 设置细边框，我们使用 thin 值。在以下示例中，使用了 thin 值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

粗块级边框宽度

要根据我们的选择为 border-block-width 设置粗边框，我们使用 thick 值。在以下示例中，使用了 thick 值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

自定义块级边框宽度

要为 border-block-width 设置边框厚度，我们根据自己的选择指定厚度值。在以下示例中，使用了 20px 厚度值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

带书写模式的块级边框宽度

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

示例

<!DOCTYPE html>
<html>

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

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

<body>
   <h2>
      CSS border-block-width property
   </h2>
   <p id="horizontal">
      This shows the border-block-width property 
      with 15px value in horizontal mode.
   </p>
   <p id="vertical">
      This shows the border-block-width property 
      with 15px value in vertical mode.
   </p>
</body>

</html>

支持的浏览器

属性
border-block-width	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

打印页面