CSS 属性

CSS 简写属性 border-block 是一个逻辑属性，它同时定义块维度中开始和结束的宽度、样式和颜色。

  • border-block 属性作用于块维度的起点和终点。元素的书写模式、方向性和文本方向决定了哪些精确的物理边框受到影响。

  • 当 writing-mode 设置为默认水平方向，border-block 应用于元素的顶部和底部边框。

  • 相反，垂直 writing-mode书写模式，将 border-block 应用于左右边框。

属性值

构成属性

此属性是以下 CSS 属性的简写:

语法

border-block: <border-block-width> || <border-block-style> || <border-block-color>

适用范围

所有 HTML 元素。

CSS border-block: 基本示例

以下示例演示了 css border-block 属性。

<html>
<head>
<style>
   .border-demo {
      width: 300px;
      height: 150px;
      margin: 20px;
      padding: 20px;
      background-color: #f0f0f0;
      border-block: 5px dotted #3498db; 
   }
   .add-demo {
      font-size: 18px;
      color: #111;
   }
</style>
</head>
<body>
<div class="border-demo">
<p class="add-demo">这是一个带有填充和背景颜色的边框元素。</p>
<p>这是 border-block 属性的示例</p> </div>
</body>
</html>

CSS border-block-writing-mode 属性

以下示例演示垂直书写模式下的 CSS 属性 border-block。

<html>
<head>
<style>
   .vertical-border {
      writing-mode: vertical-rl;
      direction: ltr;
      width: 150px;
      height: 250px;
      margin: 50px;
      padding: 20px;
      background-color: #f0f0f0;
      border-block: 1rem solid red; 
   }
   .add-style {
      font-size: 18px;
      color: #333;
   }
</style>
</head>
<body>
<div class="vertical-border">
<p class="add-style">这是一个带有实心红色边框的垂直边框元素。</p>
</div>
</body>
</html>

相关属性

下表列出了一些相关属性:

属性描述
border-block速记属性。
border-block-start用于设置各个逻辑块开始边框属性值的简写属性。
border-block-endA用于设置各个逻辑块端边框属性值的简写属性。
border-block-color定义元素的逻辑块边框的颜色。
border-block- start-color定义元素的逻辑块开始边框的颜色。
border-block-end-color定义元素的逻辑块结束边框的颜色。
border-block-style定义逻辑的样式阻止元素的边框。
border-block-start-style定义元素的逻辑块起始边框的样式。
border-block-end-style定义元素的逻辑块结束边框的样式。
border-block-width定义元素的逻辑块边框的宽度。
border-block-start-width定义元素的逻辑块开始边框的宽度。
border-block-end-width定义元素的逻辑块结束边框的宽度。