recursal/MDN huggingface dataset:
border-top-right-radius
=======================

`border-top-right-radius` 属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是 0 的话，就是没有圆弧，换句话就是说拐角是方形的。

![border-top-right-radius.png](/zh-CN/docs/Web/CSS/border-top-right-radius/border-top-right-radius.png)

一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个 CSS 属性"background-clip"来定义。

**备注：** 在 border-top-radius-radiu 属性值之后，如果作用在一个元素上没有设置“border-radius”简写属性，那么这个属性值就会通过简写属性重新设置成它的初始值。

语法
--


```css
/\* the corner is a circle \*/
/\* border-top-right-radius: radius \*/
border-top-right-radius: 3px;

/\* the corner is an ellipse \*/
/\* border-top-right-radius: horizontal vertical \*/
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/\* Global values \*/
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;
```


之上：

*radius*

这是一个 `<length>` 或 `<percentage>`，标志着圆的半径在这个拐角用作边框。

*horizontal*

这是一个 `<length>` 或 `<percentage>`，标志着椭圆的水平半长轴在这个拐角被用作边框。

*vertical*

这是一个 `<length>` 或 `<percentage>`，标志着椭圆的垂直半长轴在这个拐角被用作边框。

### 属性值

`<长度>`

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过`<length>`，负值是无效的。

`<百分数>`

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the corresponding dimension of the border box |
| 计算值 | two absolute `length`s or `percentage`s |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

border-top-right-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

| 实例 | 代码 |
| --- | --- |
|  | 圆形的弧被用作边框
```

div {
  border-top-right-radius: 40px 40px;
}
```

 |
|  | 椭圆的弧被用作边框
```

div {
  border-top-right-radius: 40px 20px;
}
```

 |
|  | 盒子是方形，圆形的弧被用作边框
```

div {
  border-top-right-radius: 40%;
}
```

 |
|  | 盒子不是方形，椭圆的弧被用作边框
```

div {
  border-top-right-radius: 40%;
}
```

 |
|  | 背景颜色在边框处剪切
```

div {
  border-top-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}
```



 |

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-radius |

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

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

参见
--

边框半径相关的 CSS 属性：CSS 速记 `border-radius`, 其他角的属性：`border-top-left-radius`, `border-bottom-right-radius` (en-US)和 `border-bottom-left-radius`。
margin-block-end
================

CSS 属性 **`margin-block-end`** 定义了元素的逻辑块末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
margin-block-end: 10px; /\* 绝对长度 \*/
margin-block-end: 1em; /\* 相对于文本尺寸 \*/
margin-block-end: 5%; /\* 相对于最近区块容器的宽度 \*/

/\* 关键词值 \*/
margin-block-end: auto;

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


根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `margin-top`、`margin-right`、`margin-bottom` 或 `margin-left` 属性。

与此属性相关的有 `margin-block-start`、`margin-inline-start` 和 `margin-inline-end` 等定义元素的其他外边距的属性。

### 取值

`margin-block-end` 属性的取值与 `margin-left` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

形式语法
----
```

margin-block-end =   
  <'margin-top'>    
  
```

示例
--

### 设置块末外边距

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`
* `writing-mode`、`direction`、`text-orientation`
var()
=====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Learn more
* See full compatibility
* Report feedback
**`var()`** CSS 函数可以插入一个自定义属性（有时也被称为“CSS 变量”）的值，用来代替非自定义属性中值的任何部分。

尝试一下
----

`var()` 函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

语法
--

函数的第一个参数是要替换的自定义属性的名称。函数的第二个参数是可选的，用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。
```

<var()> =   
  var( <custom-property-name> , <declaration-value>? )    
  
```


**备注：** 自定义属性的回退值允许使用逗号。例如，`var(--foo, red, blue)` 将 `red, blue` 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

### 值

`<custom-property-name>` 自定义属性名

在实际应用中它被定义为以两个破折号开始的任何有效标识符。自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。

`<declaration-value>` 声明值（回退值）

回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如 `)`、`]` 或 `}`）、感叹号以及顶层分号（不被任何非 `var()` 的括号包裹的分号，例如 `var(--bg-color, --bs;color)` 是不合法的，而 `var(--bg-color, --value(bs;color))` 是合法的）。

示例
--

### 在 :root 上使用自定义属性


```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

### 当第一个值未定义，回退值生效


```css
/\* 回退值 \*/

/\* 在 component 的样式中：\*/
.component .header {
  /\* header-color 没有被设置，将使用回退值 blue \*/
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* In the larger application's style: \*/
.component {
  --text-color: #080;
}
```

### 使用自定义属性作为回退值


```css
:root {
  --backup-bg-color: teal;
}

body {
  /\* main-bg-color 没有被设置，将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置，将使用回退值 white。 \*/
  color: var(--main-bg-color, var(--backup-bg-color, white));
}
```

规范
--

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

参见
--

* `env(…)`——由 user‑agent 控制的只读环境变量。
* 使用 CSS 自定义属性
font-variant-position
=====================

The **`font-variant-position`** CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in `<sub>` and `<sup>` elements.


```css
/\* Keyword values \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

/\* Global values \*/
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;
```


When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

The `font-variant-position` property is specified as one of the keyword values listed below.

### 可选值

`normal`

Deactivates alternate superscript and subscript glyphs.

`sub`

Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

`super`

Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

### 形式语法
```

font-variant-position =   
  normal  |  
  sub     |  
  super     
  
```

示例
--

### HTML


```html
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
```

### CSS


```css
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-position-prop |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
outline-color
=============

**`outline-color`** CSS 属性 被用于设置一个元素轮廓的颜色。

尝试一下
----

大多时候使用`outline`而不是 `outline-style`, `outline-width` 和 `outline-color`会更方便。

元素轮廓是绘制于元素周围的一条线，位于`border`的外围，使元素突出。不像 border，轮廓在元素的 frame 外绘制并且可能与其他元素重叠。而 border 不会出现这种现象 (除非故意).

语法
--


```css
/\* <color> values \*/
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/\* Keyword value \*/
outline-color: invert;

/\* Global values \*/
outline-color: inherit;
outline-color: initial;
outline-color: unset;
```


`outline-color`可用以下这些值。

### 值

`<color>`

轮廓颜色，规则同 `<color>`.

`invert`

反色，用于确认轮廓的显示。注意不是所有浏览器都支持该属性，若不则该属性无效。

### 形式语法
```

outline-color =   
  auto                      |  
  [ <color> | <image-1D> ]    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### HTML


```html
<p>My outline is blue, as you can see.</p>
```

### CSS


```css
p {
  outline: 2px solid; /\* Set the outline width and style \*/
  outline-color: #0000ff; /\* Make the outline blue \*/
  margin: 5px;
}
```

Accessibility concerns
----------------------

Custom focus styles commonly involve making adjustments to the `outline` property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. |
| Animation type | a color |

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

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

参见
--

* `<color>` 数据类型
* 其他与颜色有关的属性：`color`, `background-color`, `border-color`, `text-decoration-color`, `text-emphasis-color` (en-US), `text-shadow`, `caret-color`, 和`column-rule-color`
* Applying color to HTML elements using CSS
z-index
=======

CSS **`z-index`** 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。

尝试一下
----

对于定位盒子（即 `position` 属性值非 `static` 的盒子），`z-index` 属性会指定：

1. 盒子在当前层叠上下文中的层叠等级。
2. 盒子是否会创建局部层叠上下文。
语法
--


```css
/\* 关键字值 \*/
z-index: auto;

/\* 整数值 \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* 使用负值降低优先级 \*/

/\* 全局值 \*/
z-index: inherit;
z-index: initial;
z-index: unset;
```


`z-index` 属性可以被设置为关键字 `auto` 或 `<integer>`。

### 取值

`auto`

盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 `0`。

`<integer>`

盒子在当前层叠上下文的层叠等级就是 `<integer>` 的值。盒子还会创建一个局部层叠上下文。这意味着该元素的后代元素不会和该元素的外部元素比较 `z-index`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | an integer |
| Creates stacking context | yes |

形式语法
----
```

z-index =   
  auto       |  
  <integer>  |  
  inherit      
  
```

示例
--

### 视觉上的分层元素

#### HTML


```html
<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>
```


#### CSS


```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* put .gold-box above .green-box and .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* put .green-box above .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

参阅
--

* CSS `position` 属性
* 理解 CSS z-index
<image>
=======

综述：
---

CSS 的<image>数据类型描述的是 2D 图形。在 CSS 中有两种类型的图像：简单的静态图像，经常被一个在使用的 URL 引用，动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生。

CSS 可以处理以下情形中的不同类型图像：

* *具有固有尺寸*（大小）的图像，即图像具有自己的原始尺寸（大小），比如一个 jpeg 格式的图像有他自己的固有尺寸（大小）；
* 图像具有多个固定尺寸，可在一个文件中存在多个不同版本的\*尺寸，\*比如有些.ico 格式的图像。在这种情况下，图像表现出来的固有尺寸将是这些尺寸较大的一个，也就是最接近外层包含它的容器纵横比的那个图像；
* *没有固定大小*但有固定纵横比的图像，像一些矢量图形，比如 SVG 格式的图像；
* *没有固定大小也没有固定宽高比*的图像，比如 CSS 渐变（图像）；

CSS 确定一个图像对象实际尺寸的依据有三条：(1) 图像的原始尺寸；(2) 用 CSS 属性指定的宽和高，比如`width`, `height` or `background-size`中，(3) 图像对象默认大小，由图像使用用途的属性类型决定：

| 图像对象类型 | 默认的图像对象尺寸 |
| --- | --- |
| `background-image` | DOM 元素的背景定位的范围尺寸（大小） |
| `list-style-image` | 字符的 `1em` 尺寸（大小） |
| `border-image` | DOM 元素的边框图像范围尺寸（大小） |
| `cursor` | 浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸 |
| 用 CSS `content`属性，和 CSS 伪元素 `::after` 和 `::before`替换元素内容 | 一个 `300px × 150px` 矩形 |

图像对象的实际尺寸计算算法如下：

* 如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
* 如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
* 如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小（翻译可能会有误，求大神快来翻译）；

图像可以使用很多 CSS 属性，比如 `background-image`, `border-image`, `content`, `list-style-image` 和`cursor`；

**备注：** 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看浏览器兼容性了全面的条目列表

语法
--

一个 <image> CSS 数据类型可能表示成如下几种类型：

* 一个图像被引用为 CSS `<url>()`数据类型使用 url() 方法；
* 一个 CSS`<gradient>`;
* 页面的一个部分，定义在`element()`方法中；
示例
--

以下是有效的图像引用值：


```css
url(test.jpg)                          url() 方法，只要 test.jpg 是图像文件
linear-gradient(to bottom, blue, red)  一个 <gradient>标签
element(#colonne3)                     页面的一部分，使用了 element() 方法，
                                       如果 colonne3 是存在于页面中的一个元素 id 即可
```


以下是无效的图像引用值：
```

cervin.jpg                             图像文件必须使用 url() 方法定义
url(report.pdf)                        url() 方法指向的文件链接必须是一个图像文件
element(#fakeid)                       如果 fakeid 是一个不存在与页面的元素 id
```

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

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

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

参阅：
---

* Using CSS gradients, `<gradient>`, `linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US)
* `element()`
margin-inline-end
=================

**`margin-inline-end`** CSS 属性定义元素的逻辑行末外边距，根据元素的书写模式、行内方向和文本朝向映射为实体外边距。换句话说，它根据 `writing-mode`、`direction` 和 `text-orientation` 属性的值对应于 `margin-top`、`margin-right`、`margin-bottom` 或 `margin-left` 属性。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
margin-inline-end: 10px; /\* 绝对长度 \*/
margin-inline-end: 1em; /\* 相对于文字大小 \*/
margin-inline-end: 5%; /\* 相对于最近区块容器的宽度 \*/

/\* 关键词值 \*/
margin-inline-end: auto;

/\* 全局值 \*/
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;
```


这个属性与 `margin-block-start`、`margin-block-end` 和 `margin-inline-start` 属性相关，它们均定义元素的其他边距。

### 值

`margin-inline-end` 属性接受与 `margin-left` 属性相同的值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

形式语法
----
```

margin-inline-end =   
  <'margin-top'>    
  
```

示例
--

### 设置逻辑行末外边距

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* `margin-inline-start`
* 对应的实体属性：`margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`
* `writing-mode`、`direction`、`text-orientation`
border-block-start-color
========================

CSS 属性 **`border-block-start-color`** 定义了元素的逻辑块首的边框颜色，并根据元素的书写模式、行内方向和文本朝向对应至实体边框颜色。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-color`、`border-right-color`、`border-bottom-color` 或 `border-left-color` 属性。

尝试一下
----

语法
--


```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;

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


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

### 取值

`<'color'>`

见 `border-color`

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | by computed value type |

形式语法
----
```

border-block-start-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 竖排文本的边框颜色

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}
```


#### 结果

规范
--

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

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

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

参见
--

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

**`tab-size`** CSS 属性用于自定义制表符（U+0009）的宽度。

尝试一下
----

语法
--


```css
/\* <integer> 值 \*/
tab-size: 4;
tab-size: 0;

/\* <length> 值 \*/
tab-size: 10px;
tab-size: 2em;

/\* 全局值 \*/
tab-size: inherit;
tab-size: initial;
tab-size: unset;
```

### 取值

`<integer>`

制表符的宽度应为空格字符（U+0020）的宽度的倍数。必须是非负数

`<length>`

制表符的宽度。必须是非负数。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `8` |
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| 计算值 | the specified integer or an absolute length |
| Animation type | a length |

形式语法
----
```

tab-size =   
  <number [0,∞]>  |  
  <length [0,∞]>    
  
```

示例
--

### 按字符数扩展


```css
pre {
  tab-size: 4; /\* 将制表符大小设置为 4 个字符宽度。 \*/
}
```

### 折叠制表符


```css
pre {
  tab-size: 0; /\* 去除缩进 \*/
}
```

### 与默认尺寸相比较

这个例子比较了默认的制表符大小和自定义的制表符大小。请注意，设置了 `white-space` 属性为 `pre`，以防止制表符折叠。

#### HTML


```html
<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
```


#### CSS


```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

参见
--

* `white-space`
CSS 生成内容
========

CSS 生成内容（Generated Content）是 CSS 其中一个模块，定义了如何给一个元素添加内容。

参考
--

### 属性

* `content`
* `quotes`
规范
--

| Specification |
| --- |
| CSS Generated Content Module Level 3  |
background-image
================

CSS **`background-image`** 属性用于为一个元素设置一个或者多个背景图像。

尝试一下
----

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 `background-color` 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性`background-clip` 和 `background-origin` 中定义。

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 `none`。

**备注：** 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 `background-color` 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。

语法
--

每个背景图像被明确规定为关键字 `none` 或是一个 `<image>` 值。

可以提供由逗号分隔的多个值来指定多个背景图像：


```css
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");
```

### 取值

`none`

是一个表示无背景图的关键字。

`<image>`

`<image>` 用来标记将要显示的图片。支持多背景 (en-US)设置，背景之间以逗号隔开。

### 正规语法
```

background-image =   
  <bg-image>#    
  
<bg-image> =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

示例
--

注意星星图片部分透明且位于猫图片上方。

#### HTML


```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```


#### CSS


```css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```


#### 结果

无障碍相关
-----

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会告知用户它的存在，因而不能向用户传达任何信息。如果图像包含对理解页面总体目的至关重要的信息，则最好在文档中作出语义性地描述（describe it semantically）。

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-image |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with `url` values made absolute |
| Animation type | discrete |

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

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

[1] 如果 `about:config` 中 `browser.display.use_document_colors` 被设置为 `false`, 背景图像将不会展示。

[2] 当前的 iOS Safari 版本 (5.0) CSS 背景属性对 SVG 的支持并不完善。iOS Safari (5.0) 之前的版本亦是如此。

参见
--

* Implementing image sprites in CSS
* `<img>`
* 与图像相关的数据类型：`<image>`, `<gradient>`
* 与图像相关的函数：`linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US), `element()`, `image()` (en-US), `image-set()` (en-US), `url()`