border-block-start
==================

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

尝试一下
----

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
语法
--


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

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


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

与此相关的属性有 `border-block-end`、`border-inline-start` 和 `border-inline-end`，这些属性定义了元素的其他边框。

### 取值

`border-block-start` 属性可用下列值中的至少一个指定，次序任意：

`<'border-width'>`

边框宽度。见 `border-width`。

`<'border-style'>`

边框线型。见 `border-style`。

`<'color'>`

边框颜色。见 `color`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-block-start-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-start-color`: by computed value type
* `border-block-start-style`: discrete
* `border-block-start-width`: by computed value type
 |

形式语法
----
```

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    
  
```

示例
--

### 竖排文本的边框

#### HTML


```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-start: 5px dashed blue;
}
```

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-shorthands |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top`、`border-right`、`border-bottom` 或 `border-left`
* `writing-mode`、`direction`、`text-orientation`