border-block

2025年01月04日

柏拉文

越努力，越幸运

一、认识

---

CSS 属性 border-block 为简写属性，用于在样式表中的某处同时设置逻辑块向边框的各属性值。

border-block 可用于设置 border-block-width、border-block-style 和 border-block-color 中至少一个属性的值，且一次性设置块首和块末。此属性所对应的实体边框取决于元素的书写模式、行内方向和文本朝向。根据 writing-mode、direction 和 text-orientation 所定义的值，此属性对应于 border-top 和 border-bottom，或者 border-right 和 border-left 属性。

另一方向的边框可用 border-inline 设置，此属性会设置 border-inline-start 和 border-inline-end。

二、构成

---

border-block 此属性为下列 CSS 属性的简写属性：

• border-block-color

• border-block-style

• border-block-width

三、语法

---

border-block = 
  <'border-block-start'>  

<border-block-start> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

/* 全局值 */
border-block: inherit;
border-block: initial;
border-block: revert;
border-block: revert-layer;
border-block: unset;