CSS border-block-style - 易学教程，面试笔记经验！

CSS 属性 border-block-style 决定逻辑块边框；元素的书写模式、方向性和文本方向决定了边框的物理表示方式。

根据writing-mode、direction和text-orientation的给定值，其映射对应于border-top-style 和border-bottom-style ，或者border-left-style 和 border-right-style属性。
border-inline-style属性可用于设置垂直维度中的边框样式。可以使用它设置border-inline-start-style和border-inline-end-style的值。

可能值

<'border-style'>: 边框的线条样式。

语法

border-block-style = <'border-top-style'>{1,2}

适用范围

所有 HTML 元素。

CSS border-block-style: none 值

以下示例演示了 border-block-style 属性和 none 值的用法。

<html>
<head>
<style>
   div {
      background-color: #f0f0f0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: none;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个none值的 border-block-style 属性的示例。</p>
</div>
</body>
</html>

CSS border-block-style: hidden

以下示例演示 border-block-style 属性和隐藏样式值的用法。

<html>
<head>
<style>
   div {
      background-color: #ccf0c5;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: hidden;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个带有 border-block-style 属性和隐藏样式的示例。</p>
</div>
</body>
</html>

CSS border-block-style: dashed

以下示例演示了 border-block-style 属性和虚线dashed样式值的用法。

<html>
<head>
<style>
   div {
      background-color: #e3e8b0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: dashed;
      border-block-width: 5px;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个带有 border-block-style 属性和虚线样式的示例。</p>
</div>
</body>
</html>

CSS border-block-style: solid

以下示例演示了 border-block-style 属性和solid样式值的用法。

<html>
<head>
<style>
   div {
      background-color: #e8d1b0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: solid;
      border-block-width: 5px;
      border-block-color: #de880d;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个带有 border-block-style 属性和实线样式的示例。</p>
</div>
</body>
</html>

CSS border-block-style: Double

下面的例子演示了 border-block-style 属性和 double 样式值的用法。

<html>
<head>
<style>
   div {
      background-color: #e8d1b0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: double;
      border-block-width: 8px;
      border-block-color: #de880d;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个具有 border-block-style 属性和双线样式的示例。</p>
</div>
</body>
</html>

CSS border-block-style: Groove

下面的例子演示了 border-block-style 的用法block-style 属性和groove样式值。

<html>
<head>
<style>
   div {
      background-color: #ebf0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: groove;
      border-block-width: 8px;
      border-block-color: #b0bd06;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个带有 border-block-style 属性和groove样式的示例。</p>
</div>
</body>
</html>

CSS border-block-style: Ridge

下面的示例演示了border-block-style属性和ridge样式值的用法.

<html>
<head>
<style>
   div {
      background-color: #ebf0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: ridge;
      border-block-width: 10px;
      border-block-color: #b0bd06;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个 border-block-style 属性示例和ridge样式。</p>
</div>
</body>
</html>

CSS border-block-style: Inset

以下示例演示 border-block-style 属性和 inset 样式值的用法。

<html>
<head>
<style>
   div {
      background-color: #c9f0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: inset;
      border-block-width: 10px;
      border-block-color: #56ba04;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个 border-block-style 属性示例和 inset 样式。</p>
</div>
</body>
</html>

CSS border-block-style: outset

下面的示例演示了 border-block-style 属性和outset样式值的用法。

<html>
<head>
<style>
   div {
      background-color: #c9f0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: outset;
      border-block-width: 10px;
      border-block-color: #56ba04;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个 border-block-style 属性示例和outset样式。</p>
</div>
</body>
</html>

CSS border-block-style: 书写模式

以下示例演示了在垂直书写模式下使用 border-block-style 属性。

<html>
<head>
<style>
   div {
      background-color: #f0f0f0;
      width: 200px;
      height: 250px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 18px;
      color: #333;
      writing-mode: vertical-rl;
      border: 7px solid red;
      border-block-style: inset;
}
</style>
</head>
<body>
<div>
<p class="border-demo">这是一个有边框的元素，具有边框样式和垂直书写模式。</p>
</div>
</body>
</html>