recursal/MDN huggingface dataset:
-webkit-box-reflect
===================

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

**`-webkit-box-reflect`** CSS 属性可让你将元素内容在特定方向上进行轴对称反射。


```css
/\* 方向值 \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* 偏移量值 \*/
-webkit-box-reflect: below 10px;

/\* 蒙版值 \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* 全局属性值 \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
```

语法
--

### 值

`above`、`below`、`right`、`left`

这些关键字指示反射发生的方向。

`<length>`

指示反射的大小。

`<image>`

描述要应用于反射的蒙版。

形式定义
----

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

形式语法
----
```

-webkit-box-reflect =
  [ above | below | right | left ]? <length>? <image>?
```

规范
--

这是一个非标准的属性。在 CSS 中创建反射效果的标准方法是使用 CSS 的 `element()` 函数。

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

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

参见
--

* Apple 文档。
* Webkit 文档。
* Lea Verou 撰写的有关使用 CSS 特性创建反射效果的文章已经纳入标准跟踪。
-moz-user-input
===============

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

在 Mozilla 应用程序中，**`-moz-user-input`** 决定元素是否将接受用户输入。A 类似的属性 **`user-focus`** 是在CSS3 UI 规范的前身的早期草案中提出的，但被工作组拒绝。

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

`-moz-user-input` was one of the proposals leading to the proposed CSS 3 `user-input` property, which has not yet reached Candidate Recommendation (call for implementations).

For elements that normally take user input, such as a `<textarea>`, the initial value of `-moz-user-input` is `enabled`.

Syntax
------


```css
/\* Keyword values \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* Global values \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```

### Values

none

The element does not respond to user input, and it does not become `:active`.

enabled

The element accepts user input. For textboxes, this is the default behavior.

disabled

The element does not accept user input. However, this is not the same as setting `disabled` to true, in that the element is drawn normally.

### Formal syntax

Error: could not find syntax for this itemExamples
--------


```css
input.example {
  /\* the user will be able to select the text, but not change it. \*/
  -moz-user-input: disabled;
}
```

See also
--------

* `-moz-user-focus` (en-US)
* `-moz-user-modify` (en-US)
* `-moz-user-select` (en-US)
@keyframes
==========

关键帧 **`@keyframes`** at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```


JavaScript 可以通过 CSS 对象模型的 `CSSKeyframesRule` (en-US) 接口来访问 `@keyframes`。

要使用关键帧，先创建一个带名称的 `@keyframes` 规则，以便后续使用 `animation-name` 属性将动画同其关键帧声明匹配。每个 `@keyframes` 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。

### 让关键帧序列生效

如果一个关键帧规则没有指定动画的开始或结束状态（也就是，`0%`/`from` 和`100%`/`to`，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

### 重复定义

如果多个关键帧使用同一个名称，以最后一次定义的为准。 `@keyframes` 不存在层叠样式 (cascade) 的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。

如果一个 @keyframes 内的关键帧的百分比存在重复的情况，则 @keyframes 规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则 @keyframes 规则内是可以使用层叠样式的。

### 属性个数不定

如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。例如：


```css
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
 72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}
```


例子中，`top` 属性分别出现在关键帧 `0%`、`30%` 和 `100%` 的中，而 `left` 属性分别出现在关键帧 `0%`、`68%`、`72%` 和 `100%` 中。

### 同一关键帧中的相同属性被重复定义

如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。例如：


```css
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
```


上面这个例子中，`50%` 关键帧中分别最后设置的属性 `top: 10px` 和 `left: 20px` 是有效的，但是其他的属性会被忽略。

Firefox 14 开始支持层叠 keyframes。

### 关键帧中的 `!important`

关键帧中出现的 `!important` 将会被忽略。


```css
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /\* 忽略 \*/
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /\* 忽略 \*/
    margin-bottom: 50px;
  }
}
```

语法
--

### 取值

`<custom-ident>`

帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。

`from`

等价于 `0%`。

`to`

等价于 `100%`。

`<percentage>`

动画序列中触发关键帧的时间点，使用百分值来表示。

### 形式化语法
```

@keyframes =   
  @keyframes <keyframes-name> { <qualified-rule-list> }    
  
<keyframes-name> =   
  <custom-ident>  |  
  <string>          
  
```

示例
--

参见使用 CSS 动画。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # keyframes |

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

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

参见
--

* 使用 CSS 动画
* `AnimationEvent` (en-US)
padding-inline-end
==================

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

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
padding-inline-end: 10px; /\* 绝对长度 \*/
padding-inline-end: 1em; /\* 相对于文本尺寸的长度 \*/

/\* <percentage> 值 \*/
padding-inline-end: 5%; /\* 相对于包含区块宽度的内边距 \*/

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

### 取值

`<length>`

以固定值指定的内边距尺寸。必须非负。

`<percentage>`

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的*宽度*，由 `writing-mode` 所定义）。必须非负。

描述
--

虽然规范定义 `padding-inline-end` 属性的取值与 `padding-top` 属性相同，但是此属性所对应的实体属性取决于 `writing-mode`、`direction` 和 `text-orientation` 所设置的值。因此这一属性可能对应于 `padding-bottom`、`padding-right` 或 `padding-left`。

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as `length` |
| Animation type | a length |

形式语法
----
```

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

示例
--

### 为竖排文本设置行末内边距

#### HTML


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


#### CSS


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

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


#### 结果

规范
--

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

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`
* `writing-mode`、`direction`、`text-orientation`
<hex-color>
===========

CSS 数据类型 **`<hex-color>`** 为描述 sRGB (en-US) 颜色的*十六进制颜色语法*的记号，此记号将颜色的主分量（红、绿、蓝）及其透明度写为十六进制数。

在可使用 `<color>` 的任意位置均可使用 `<hex-color>` 值。

语法
--
```

#RGB        // 三值语法
#RGBA       // 四值语法
#RRGGBB     // 六值语法
#RRGGBBAA   // 八值语法
```

### 取值

`R` 或 `RR`

颜色的*红色*分量，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`1` 意为 `11`。

`G` 或 `GG`

颜色的*绿色*分量，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`c` 意为 `cc`。

`B` 或 `BB`

颜色的*蓝色*分量，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`9` 意为 `99`。

`A` 或 `AA` 可选

颜色的 *alpha* 分量，标示其透明度，为介于 `0` 和 `ff`（255）之间不区分大小写的十六进制数。若仅有一数，则重复此数——`e` 意为 `ee`。`0`（即 `00`）表示完全透明的颜色，而 `f`（即 `ff`）表示完全不透明的颜色。


**备注：** 此语法不区分大小写——`#00ff00` 与 `#00FF00` 相同。

示例
--

### 完全不透明的亮粉色的十六进制语法

#### HTML


```html
<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>
```


#### CSS
```

body {
  display: flex;
  justify-content: space-evenly;
}
```



```css
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # hex-notation |

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

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

参见
--

* `<color>`——颜色数据类型
* `rgb()`——允许用十进制值设置颜色的三个分量及其透明度的函数
min-height
==========

CSS 属性 **`min-height`** 能够设置元素的最小高度。这样能够防止 ``height`` 属性的应用值小于 `min-height` 的值。

尝试一下
----

当 `min-height` 大于 `max-height` 或 `height` 时，元素的高度会设置为 `min-height` 的值。

语法
--


```css
/\* <长度> 数值 \*/
min-height: 3.5em;

/\* <百分比> 数值 \*/
min-height: 10%;

/\* 关键词 \*/
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);

/\* 全局数值 \*/
min-height: inherit;
min-height: initial;
min-height: unset;
```

### Values

`<length>`

定义 `min-height` 为一个绝对数值。

`<percentage>`

定义 `min-height` 为一个相对于父容器高度的百分数。

`auto`

浏览器将通过计算为指定元素选择一个 `min-height` 值。

`none`

不限制盒容器的尺寸。

`max-content`

The intrinsic preferred `min-height`.

`min-content`

The intrinsic minimum `min-height`.

`fit-content(`<length-percentage>`)`

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

Formal definition
-----------------

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements but non-replaced inline elements, table columns, and column groups |
| 是否是继承属性 | 否 |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `0`. |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

min-height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### Setting min-height


```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

相关链接
----

* The box model, `box-sizing`
* `height`, `max-height`
border-end-end-radius
=====================

CSS 属性 **`border-end-end-radius`** 定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。

尝试一下
----

此属性影响元素块末与行末之间的拐角。例如在 `horizontal-tb` 书写模式和 `ltr` 行内方向下，此属性对应于 `border-bottom-right-radius` (en-US) 属性。

语法
--


```css
/\* 长度值 \*/
/\* 使用一个值所得拐角为圆形 \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* 使用两个值所得拐角为椭圆形 \*/
border-end-end-radius: 1em 2em;

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

### 取值

`<length-percentage>`

表示圆的半径或者椭圆半长轴和半短轴的尺寸。表示绝对尺寸可用 CSS `<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-end-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 竖排文本的边框半径

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}
```


#### 结果

规范
--

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

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`border-bottom-right-radius` (en-US)
* `writing-mode`、`direction`、`text-orientation`
隐私与:visited 选择器
===============

在大概 2010 年时，CSS 选择器 `:visited` 被网站用来检测用户的浏览记录，并找出用户都访问过哪些网站。这些可以通过 `window.getComputedStyle` 和其他技术实现。这个过程可以很迅速的执行，不仅能够判断用户是否曾经访问过这个页面，还能借此猜测出大量的用户身份信息。

为了解决这个问题，Gecko 2 实现了一项隐私方面的更新，限制网站可以从访问过的链接中获得的信息。其他的浏览器也已经做了相同的改变。

善意的谎言
-----

为了保护用户隐私，火狐和其他浏览器会在特定情况下向网站应用撒谎：

* `window.getComputedStyle` 方法和其他类似的功能（例如 `element.querySelector`）将总是将所有链接都看待为“未访问过”的。
* 使用形如 `:visited + span` 的兄弟选择器时，指定的元素（本例中的 `span`）总是会按照链接未访问过显示。
* 在一些特殊的情况下，例如链接元素嵌套，且选中的元素不是检查历史记录的链接元素。对应元素同样会按照链接未访问过渲染。
对已访问链接样式的限制
-----------

你仍然可以给已访问链接设置视觉样式，但是对可用样式作出了限制。只有下列的属性才能被应用到已访问链接：

* `color`
* `background-color`
* `border-color` (and its sub-properties)
* `outline-color`
* `fill` 和 `stroke` 属性的颜色部分

此外，即便是上述样式，你也不能给访问过和未访问过设置不同的透明度。你不能使用`rgba()` (en-US)、`hsla()` (en-US)或是 `transparent` 关键词。

这是一个使用被限样式的例子：


```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* background-color 的默认值为 'transparent'。
 你必须指定一个不同值，否则无法应用对 :visited 的修改 \*/
}

:visited {
  outline-color: orange; /\* 已访问链接的轮廓为橘色 \*/
  color: yellow; /\* 已访问链接的文本为黄色 \*/
  background-color: green; /\* 已访问链接的背景为绿色 \*/
}
```

对 WEB 开发者的影响
------------

总体来说，这不会显著地影响到 WEB 开发者。但在一些特殊情况下，网站需要做些修改：

* 使用背景图片来区分链接是否被访问过的样式不再起作用，因为只有颜色才能被作用到已访问链接上。
* 不能通过 `:visited` 选择器指定了透明或不透明的颜色。
更多
--

* privacy-related changes coming to CSS :visited on Mozilla Hacks
* Plugging the CSS History Leak on the Mozilla Security Blog
* Preventing attacks on a user's history through CSS :visited selectors
text-underline-offset
=====================

CSS 的 **`text-underline-offset`** 属性设置文本装饰下划线（使用 `text-decoration` 应用）与其原始位置的偏移距离。

尝试一下
----

`text-underline-offset` 不是 `text-decoration` 简写的一部分。虽然元素可以有多条 `text-decoration` 线，但 `text-underline-offset` 只影响下划线，而**不**影响其他可能的线装饰选项，例如 `overline` 或 `line-through`。

语法
--


```css
/\* 单个关键字 \*/
text-underline-offset: auto;

/\* length \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* percentage \*/
text-underline-offset: 20%;

/\* 全局值 \*/
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;
```


`text-underline-offset` 属性指定为以下列出的单个值。

### 值

`auto`

浏览器为下划线选择适当的偏移量。

`<length>`

指定下划线的偏移量为 `<length>`，覆盖字体文件建议的和浏览器默认的值。建议使用 `em` 单位，以便偏移量随字体大小缩放。

`<percentage>`

指定下划线的偏移量为元素的字体中 **1 em** 的 `<percentage>`。百分比作为相对值继承，因此会随着字体的变化而缩放。在应用了此属性后，即使存在具有不同的字体大小或垂直对齐方式的子元素，偏移量在应用下划线的整个盒子内都是恒定的。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| Percentages | refer to the font size of the element itself |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

text-underline-offset =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### text-underline-offset 的演示


```html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
```



```css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}
```

规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

参见
--

* `text-decoration`
* `text-decoration-thickness`
border-top-width
================

css 属性 **`border-top-width`** 是用于设置盒模型的上边框的宽度

尝试一下
----

Syntax
------


```css
/\* Keyword values \*/
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/\* <length> values \*/
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/\* Global keywords \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;
```

### Values

`<br-width>`

上边框的宽度属性的有效值要么是一个具体的非负数，要么是一个关键字。如果是关键字，必须是一下几种：

| `thin` |  | A thin border |
| --- | --- | --- |
| `medium` |  | A medium border |
| `thick` |  | A thick border |

**备注：** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

### Formal syntax
```

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

Example
-------

### 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-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}
```

### Result

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

| 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-top-style` is `none` or `hidden` |
| Animation type | a length |

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

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

See also
--------

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

**`:enabled`** CSS 伪类表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。该元素还有一个被禁用的状态，在此状态下它无法被激活或接受焦点。

尝试一下
----

语法
--
```

:enabled
```

示例
--

以下示例将在启用状态下把类型为文本输入框和按钮的 `<input>` 颜色设置为绿色，禁用时设置为灰色。这有助于用户理解哪些元素可以进行交互操作。

### HTML


```html
<form action="url\_of\_form">
  <label for="FirstField">第一个字段（已启用）:</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">第一个字段（已禁用）:</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS


```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

参见
--

* `:disabled`
:read-only
==========

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

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

* Learn more
* See full compatibility
* Report feedback
**`:read-only`** CSS 伪类 表示元素不可被用户编辑的状态（如锁定的文本输入框）。


```css
/\* Selects any <input> element that is read-only \*/
/\* Supported in Firefox with a prefix \*/
input:-moz-read-only {
  background-color: #ccc;
}

/\* Supported in Blink/WebKit/Edge without a prefix \*/
input:read-only {
  background-color: #ccc;
}
```


**备注：** 这个选择器不只是选择具有 `readonly` 属性的`<input>` 元素，它也会选择所有的不能被用户编辑的元素。

语法
--

Error: could not find syntax for this item示例
--

### HTML


```html
<input type="text" value="Type whatever you want here." />
<input type="text" value="This is a read-only field." readonly />
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>
```

### CSS


```css
input {
  min-width: 25em;
}
input:-moz-read-only {
  background: cyan;
}
input:read-only {
  background: cyan;
}

p:-moz-read-only {
  background: lightgray;
}
p:read-only {
  background: lightgray;
}
p[contenteditable="true"] {
  color: blue;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

参见
--

* `:read-write`
* HTML `contenteditable` attribute
scroll-snap-align
=================

**`scroll-snap-align`** 属性将盒子的吸附位置指定为其吸附区域（作为对齐对象）在其吸附容器的吸附口（作为对齐容器）中的对齐方式。其两值分别指定了在块向轴盒行向轴上的吸附对齐方式。若仅指定一值，则第二值默认为同一值。

尝试一下
----

语法
--


```css
/\* 关键字值 \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* 当设置两值时，第一值为块向，第二值为行向 \*/
scroll-snap-align: center;

/\* 全局值 \*/
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;
```

### 取值

`none`

此盒在此轴上未定义吸附位置。

`start`

此盒的滚动吸附区域在滚动容器的吸附口中的首对齐为此轴上的吸附位置。

`end`

此盒的滚动吸附区域在滚动容器的吸附口中的末对齐为此轴上的吸附位置。

`center`

此盒的滚动吸附区域在滚动容器的吸附口中的居中对齐为此轴上的吸附位置。

形式定义
----

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

形式语法
----
```

scroll-snap-align =   
  [ none | start | end | center ]{1,2}    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-align |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
<filter-function>
=================

**`<filter-function>`** CSS 数据类型 代表可以改变输入图像外观的图形效果。它可以用于`filter` 和 `backdrop-filter` 属性。

语法
--

`<filter-function>` 数据类型由下列过滤器函数之一指定的。每个函数需要一个参数，如果参数无效，结果不会被改变，如同没有使用过滤器一样。

`blur()`

模糊图像

`brightness()`

让图像更明亮或更暗淡

`contrast()`

增加或减少图像的对比度

`drop-shadow()`

在图像后方应用投影

`grayscale()`

将图像转为灰度图

`hue-rotate()` (en-US)

改变图像的整体色调

`invert()` (en-US)

反转图像颜色

`opacity()`

改变图像透明度

`saturate()` (en-US)

超饱和或去饱和输入的图像

`sepia()` (en-US)

将图像转为棕褐色

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

相关参考
----

* 使用此数据类型的属性：`filter` 以及 `backdrop-filter`