recursal/MDN huggingface dataset:
inset-inline-start
==================

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

尝试一下
----

语法
--


```css
/\* 长度值 \*/
inset-inline-start: 3px;
inset-inline-start: 2.4em;

/\* 包含块的宽度或高度的百分比 \*/
inset-inline-start: 10%;

/\* 关键词值 \*/
inset-inline-start: auto;

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


`inset-inline-start` 和 `inset-inline-end` 的简写属性为 `inset-inline`。

### 取值

`inset-inline-start` 属性的取值与 `left` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | positioned elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

inset-inline-start =   
  auto                 |  
  <length-percentage>    
  
<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;
  position: relative;
  inset-inline-start: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

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

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

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

参见
--

* 定义其他偏移的属性：`inset-block-start`、`inset-block-end` 和 `inset-inline-end`
* 对应的实体属性：`top`、`right`、`bottom` 和 `left`
* `writing-mode`、`direction`、`text-orientation`
:playing
========

**`:playing`** CSS 伪类选择器表示一个处于“播放”状态的可播放元素，例如 `<audio>` 或 `<video>`。

如果用户明确地启动了播放，那么资源就被认为是正在播放。如果元素的确处于播放状态，但由于与用户意图无关的原因而被暂停，也被认为是正在播放。在这种情况下，一旦底层原因（如“缓冲”或“停滞”状态）得到解决，播放将自动恢复。

语法
--


```css
:playing {
  /\* ... \*/
}
```

示例
--

### CSS


```css
:playing {
  border: 5px solid green;
}
```

规范
--

| Specification |
| --- |
| Selectors Level 4 # selectordef-playing |

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

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

参见
--

* `:paused`
contain-intrinsic-width
=======================

CSS 属性 **`contain-intrinsic-width`** 定义了元素受尺寸局限时浏览器用于布局的元素宽度。

语法
--


```css
/\* 关键词值 \*/
contain-intrinsic-width: none;

/\* <length> 值 \*/
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;

/\* auto <length> \*/
contain-intrinsic-width: auto 300px;

/\* 全局值 \*/
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;
```

### 取值

可为元素指定下列值。

`none`

元素无固有宽度。

`<length>`

元素具有指定宽度（`<length>`）。

`auto <length>`

若存在“正常渲染”的元素宽度且元素正在跳过其内容（例如在屏外时），则为此宽度的记忆值；否则为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素，且亦可使用简写属性 `contain-intrinsic-size` 设置。

尺寸局限允许用户代理将元素视为具有固定尺寸进行布局。由此避免为确定实际尺寸而重渲子元素，阻止不必要的重排（进而改善用户体验）。尺寸局限默认将元素视为不包含内容，且可按与内容无宽度或高度相同的方式折叠布局。`contain-intrinsic-width` 允许作者为布局所用的宽度指定合适的值。

`auto <length>` 值允许元素“被正常渲染”（包括其子元素）后存储其宽度，再在元素不包含任何内容时使用此宽度而非指定宽度。由此允许有 `content-visibility: auto` 的屏外元素无需开发者精确估计元素尺寸即可受益于尺寸局限。在子元素渲染时，不使用记忆值（若启用尺寸局限，则将使用 `<length>`）。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| 计算值 | as specified, with <length>s values computed |
| Animation type | by computed value type |

形式语法
----
```

contain-intrinsic-width =   
  auto? [ none | <length> ]    
  
```

示例
--

除下列示例外，`contain-intrinsic-size` 页面含有演示修改固有宽度和高度的效果的运行实例。

### 设置固有宽度

下列 HTML 代码定义了将受尺寸限制的元素“contained\_element”，此元素包含一个子元素。


```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```


下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的宽度和高度分别使用 `contain-intrinsic-width` 和 `contain-intrinsic-height` 同时设置。


```css
#contained\_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-width |

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

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

参见
--

* content-visibility：提高渲染性能的新 CSS 属性（web.dev）
* `contain-intrinsic-size`
* `contain-intrinsic-height`
* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`
CSS Color
=========

**CSS Color** 是一个处理颜色的 CSS 模块，包括颜色类型、颜色混合、不透明度、以及你如何将这些颜色和效果应用于 HTML 内容。

不是所有把 `<color>` 作为值的 CSS 属性都是这个模块的一部分，但是它们确实依赖这个模块。

参考
--

### 属性

* `color`
* `color-adjust` (en-US)
* `opacity`
### 数据类型

* `<color>`
教程
--

Applying color to HTML elements using CSS

一份用 CSS 将颜色应用于许多不同类型内容上的教程。所有和颜色相关的 CSS 属性都会涉及。

工具
--

Color picker tool

该工具能让你创建、调整和试验自定义颜色变得简单。

规范
--

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

参见
--

* CSS 颜色调整 (en-US)模块及 `print-color-adjust` (en-US) 属性。
* 定义 CSS `<gradient>` 图像类型的 CSS 图像 (en-US) 模块。
* `VideoColorSpace` (en-US) 接口
* `<feColorMatrix>` SVG 元素
* Canvas API：应用样式及颜色
border-left-width
=================

CSS 的 **`border-left-width`** 属性用来设置盒子的左边框的宽度。

尝试一下
----

语法
--


```css
/\* 关键字数值 \*/
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/\* 长度数值 \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/\* 全局关键字 \*/
border-left-width: inherit;
border-left-width: initial;
border-left-width: unset;
```

### 数值

`<br-width>`

定义边框的宽度，或者作为显性非负的长度值 `<length>` 或者是关键字。如果他是一个关键字，它必须是下列值的一种：

* `thin` 一个细边框
* `medium` 一个中等边框
* `thick` 一个粗边框

**备注：** 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 `thin ≤ medium ≤ thick`, 在单独文档中这些值内部是恒定不变的。

### 形式语法
```

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

示例
--

### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```

### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```

### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length or `0` if `border-left-style` is `none` or `hidden` |
| Animation type | a length |

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

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

参见
--

* The other border-width-related CSS properties: `border-bottom-width`, `border-right-width`, `border-top-width`, and `border-width`.
* The other border-left-related CSS properties: `border`, `border-left`, `border-left-style`, and `border-left-color`.
整型
==

 The **`<integer>`** CSS data type is a special type of `<number>` that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as `column-count`, `counter-increment`, `grid-column`, `grid-row`, and `z-index`.
 The **`<integer>`** css 数据类型是一种特殊的<number>类型，它表示一个整数，无论是正数还是负数。整数可以用于许多 css 属性，例如`column-count`, `counter-increment`, `grid-column`, `grid-row`, and `z-index`.

语法
--

 The `<integer>` data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single `+` or `-` sign. There is no unit associated with integers.
 <integer>数据类型由一个或多个十进制数字组成，包括 0 到 9，可以选择前面加一个 + 或 - 号。没有与整数关联的单位。


**备注：** There is no official range of valid `<integer>` values. Opera 12.1 supports values up to 215-1, IE up to 220-1, and other browsers even higher. During the CSS3 Values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in April 2012 during the LC phase, was [-227-1; 227-1], but other values like 224-1 and 230-1 were also proposed. However, the latest spec doesn't specify a range anymore.
 注意：没有有效的<integer>值的正式范围。Opera12.1 支持高达 215-1 的值，IE 高达 220-1 的值，其他浏览器支持更高的值。在 CSS3 值周期中，有很多关于设置最小支持范围的讨论：2012 年 4 月在 LC 阶段的最新决定是 [-227-1; 227-1],，但也提出了 224-1 and 230 等其他值。但是，最新的规范不再指定范围。


Interpolation
-------------

 When animated, values of the `<integer>` data type are interpolated using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. The speed of the interpolation is determined by the timing function (en-US) associated with the animation.
 设置动画时，<integer>数据类型的值将使用离散的完整步骤进行插值。计算过程就像是实数，浮点数一样；离散值是使用 floor 函数得到的。插值的速度由与动画相关联的定时函数确定。

示例
--

### 合法整型
```

12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading -
```

### 非法整型
```

12.0        This is a <number>, not an <integer>, though it represents an integer.
12.         Decimal points are not allowed.
+---12      Only one leading +/- is allowed.
ten         Letters are not allowed.
_5          Special characters are not allowed.
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
3e4         Scientific notation is not allowed.
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # integers |

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

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

参考
--

* `<number>`
CSSOM View
==========

CSSOM 视图是一个模块，允许操作文档的可视化视图，尤其是其滚动行为。

参考
--

### 属性

* `scroll-behavior`
指南
--

*None.*

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

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

**`:first`** CSS 伪类与 `@page` at 规则一起使用。表示打印文档的第一页。（有关节点的第一个元素，请参阅 `:first-child`。）


```css
/\* 打印时选择第一页 \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```


**备注：** 你不能使用此伪类更改所有的 CSS 属性。你只能更改文档的边距、`orphans` (en-US)、`widows` 和分页符。此外，在定义边距时，你只能使用绝对长度单位。所有其他属性都将被忽略。

语法
--


```css
:first {
  /\* ... \*/
}
```

示例
--

### HTML


```html
<p>第一页。</p>
<p>第二页。</p>
<button>打印！</button>
```

### CSS


```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```

### 结果

按下“打印！”按钮以打印此示例。第一页的文字应该大致位于中心位置，而其他页的内容将位于默认位置。

规范
--

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

参见
--

* `@page`
* 其他页面相关的伪类：`:left`、`:right`
border-right
============

CSS 属性 **border-`right`** 是属性`border-right-color`, `border-right-style`, 和`border-right-width`的三者的缩写。这些属性都是在描述一个元素的右边的边框`border`。


```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
```


**备注：** 和 CSS 所有的缩写属性一样，border-`right` 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......


```css
border-right-style: dotted;
border-right: thick green;
```


......实际上应该是下面这个样子......


```css
border-right-style: dotted;
border-right: none thick green;
```


......并且在 border-`right` 之前定义的 `border-right-style` 的值也会被覆盖。由于`border-right-style` 的默认值是 none, border-style 的最终结果就是没有边框。

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-right-width`: `medium`
* `border-right-style`: `none`
* `border-right-color`: `currentcolor`
 |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-right-style`: as specified
* `border-right-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-right-color`: a color
* `border-right-style`: discrete
* `border-right-width`: a length
 |

Syntax
------

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

### Values

`<br-width>`

请参阅 `border-right-width`.

`<br-style>`

请参阅 `border-right-style`.

``<color>``

请参阅 `border-right-color`.

### Formal syntax
```

border-right =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Example
-------


```html
<div>This box has a border on the right side.</div>
```



```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS 文本装饰
========

**CSS 文本装饰** 是 CSS 的一个模块，用于定义与文本修饰相关的功能，例如下划线，文本阴影和强调标记。

参考
--

### 属性

* `letter-spacing`
* `text-align`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent`
* `text-rendering`
* `text-shadow`
* `text-transform`
* `white-space`
* `word-spacing`
指南
--

*无。*

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |
border-block-end-color
======================

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

尝试一下
----

语法
--


```css
border-block-end-color: yellow;
border-block-end-color: #f5f6f7;

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


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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-block-end-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-end-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`
text-underline-position
=======================

当 `text-decoration`属性的值设置为 `underline` 之后，可以用 **`text-underline-position`** 属性为其设置下划线的位置。


```css
/\* 只设置一个属性值 \*/
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/\* 设置多个属性值 \*/
text-underline-position: under left;
text-underline-position: right under;

/\* 全局属性值 \*/
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
```


|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

### 属性值

`auto`

用户代理 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方。

`under`

强制下划线的位置为字母基线的下方，在这个位置，下划线不会穿过任何字母，这样能确保数学方程式或者化学式的下标不会被下划线阻挡。

`left`

在垂直排版模式下，使下划线的位置在文字的左侧，在水平排版模式下，和 `under` 相同。

`right`

在垂直排版模式下，使下划线的位置在文字的右侧，在水平排版模式下，和 `under` 相同。

`auto-pos` 
非标准

`auto`的同义词，应使用 `auto`。

`above` 
非标准

强制下划线放置于文本上面。当使用东亚文字时，此效果和使用 `auto` 相同。

`below` 
非标准

强制下划线放置于文本下面。当使用字母文字的时候，此效果和使用 `auto` 相同。

### 正式语法
```

text-underline-position =   
  auto                           |  
  [ under || [ left | right ] ]    
  
```

示例
--

由于 `text-underline-position` 属性可以继承，且无法用 `text-decoration` 简写属性重置，所以应当在全局级别设置其值。比如，`under` 值对一篇包括大量使用下标的数学或者化学公式的文档是非常有用的。


```css
:root {
  text-underline-position: under;
}
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-underline-position-property |

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

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

参阅
--

* `text-decoration` 属性是大多数作为设置 text-decoration 属性的简写形式，包括 `text-decoration-line`， `text-decoration-color`，和`text-decoration-style`。但是，text-decoration 不会设置 `text-underline-position`。
* Microsoft non-standard values documentation
::-webkit-progress-inner-element
================================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**`::-webkit-progress-inner-element`** CSS 伪元素选择了 `<progress>` 元素。他是 `::-webkit-progress-bar` 伪元素的父元素。

**备注：** 为了使 `::-webkit-progress-value` 生效， `<progress>` 元素的`-webkit-appearance` (en-US) 需要设置为 `none` 。

示例
--

### HTML


```html
<progress value="10" max="50"></progress>
```

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}
```

### 结果

应用了上述样式的进度条如下：

![](/zh-CN/docs/Web/CSS/::-webkit-progress-inner-element/-webkit-progress-inner-element_example.png)

规范
--

不属于任何规范。这是 WebKit/Blink 专有的一个伪元素。

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

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

参考
--

* The pseudo-elements used by WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-bar`
    + `::-webkit-progress-value`
* `::-moz-progress-bar`
* `::-ms-fill`
:focus-visible
==============

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
当元素匹配`:focus`伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，**`:focus-visible`** 伪类将生效。

这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。

请注意 Firefox 通过较旧的前缀伪类 `:-moz-focusring` 支持类似的功能。更多细节请参考`:-moz-focusring` (en-US)页面。

语法
--


```css
:focus-visible {
  /\* ... \*/
}
```

示例
--

### 基本示例

在这个例子中，`:focus-visible` 选择器利用客户端 (UA) 的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘 tab 切换控件有何不同。请注意元素的表现与具有 `:focus` 样式的元素的区别。


```html
<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>
```



```css
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
```

### 选择性地显示焦点

自定义控件，比如按钮自定义元素，可以使用 `:focus-visible` 使其仅在键盘操作时才显示焦点样式。这和`<button>`一类的原生控件表现一致。


```html
<custom-button tabindex="0" role="button">Click Me</custom-button>
```



```css
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /\* Provide a fallback style for browsers
 that don't support :focus-visible \*/
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /\* Remove the focus indicator on mouse-focus for browsers
 that do support :focus-visible \*/
  background: transparent;
}

custom-button:focus-visible {
  /\* Draw a very noticeable focus style for
 keyboard-focus on browsers that do support
 :focus-visible \*/
  outline: 4px dashed darkorange;
  background: transparent;
}
```

Polyfill
--------

你可以使用 `:focus-visible` 的 polyfill focus-visible.js 。

无障碍关注点
------

保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在 3 到 1。

可访问的视觉焦点指示：给你的网站一些焦点！设计有效且可用的焦点指示的一些建议。

规范
--

| Specification |
| --- |
| Selectors Level 4 # the-focus-visible-pseudo |

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

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

参见
--

* `:focus`
* `:focus-within`
mask-border-mode
================

该CSS属性指定使用的混合模式面具边界。**`mask-border-mode`**

Syntax
------


```css
/\* Keyword values \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

/\* Global values \*/
mask-border-mode: inherit;
mask-border-mode: initial;
mask-border-mode: unset;
```

### 值

`luminance`

掩模边界图像的亮度值用作掩模值。

`alpha`

掩模边界图像的亮度值用作掩模值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `alpha` |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

mask-border-mode =   
  luminance  |  
  alpha        
  
```

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-mode |

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

还没有任何浏览器支持此属性。
padding-left
============

CSS 属性 **`padding-left`** 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。

尝试一下
----

元素的“填充区域”是其内容和边框之间的空间。

**备注：** `padding` 属性可用于通过一个声明在元素的四个边（上、下、左、右）上设置填充。

语法
--


```css
/\* 长度单位参数 \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* 百分数参数 \*/
padding-left: 10%;

/\* 全局参数 \*/
padding-left: inherit;
padding-left: initial;
padding-left: unset;
```


`padding left`属性指定为从下表中选择的单个值。与外边距（margins）不同，可以接受的值不允许是负数。

### 参数

`<length>`

填充内边距的长度。它必须是非负的。

`<percentage>`

以与父级盒子的百分比表示的填充大小。它也必须是非负的。

标准定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

标准语法
----
```

padding-left =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

样例
--

### 使用“px”单位和百分比设置 padding-left 的样例


```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

规范
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

另见
--

* Introduction to the CSS basic box model
* `padding-top`, `padding-right`, `padding-bottom` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`