recursal/MDN huggingface dataset:
transition-duration
===================

**`transition-duration`** 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 `0s`，表示不出现过渡动画。

可以指定多个时长，每个时长会被应用到由 `transition-property` 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

|  |  |
| --- | --- |
| 初始值 | `0s` |
| 适用元素 | all elements, `::before` and `::after` pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

语法
--


```css
/\* <time> 值 \*/
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/\* 全局值 \*/
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;
```

### 值

`<time>`

`<time>` 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 `0s` ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

### 形式语法
```

transition-duration =   
  <time [0s,∞]>#    
  
```

示例
--

### 展示不同的延迟

#### HTML


```html
<div class="box duration-1">0.5 秒</div>

<div class="box duration-2">2 秒</div>

<div class="box duration-3">4 秒</div>

<button id="change">变换</button>
```


#### CSS


```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}
```


#### JavaScript


```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Transitions # transition-duration-property |

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

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

参见
--

* Using CSS transitions (en-US)
* `TransitionEvent`
:focus
======

**`:focus`** CSS 伪类表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 `Tab` 键选择它时，它会被触发。

尝试一下
----

**备注：** 此伪类仅适用于焦点的元素自身。如果要选择*包含*焦点元素的元素，请使用 `:focus-within`。

语法
--


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

示例
--

### HTML


```html
<div><input class="red-input" value="当获得焦点时我将呈现红色。" /></div>
<div><input class="blue-input" value="当获得焦点时我将呈现蓝色。" /></div>
```

### CSS


```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### 结果

无障碍考虑
-----

请确保视力不佳的人可以看到视觉焦点指示器。这也将有利于任何在明亮空间（如室外阳光下）使用屏幕的人。WCAG 2.1 SC 1.4.11 非文本对比度 要求视觉焦点指示符的对比度至少为 3 比 1。

* 无障碍的视觉焦点指示：让你的网站更具焦点！设计有用且可用的焦点指示器的技巧
### `:focus { outline: none; }`

永远不要为了仅移除焦点轮廓（可见的焦点指示），而不替换为符合 WCAG 2.1 SC 1.4.11 非文本对比度标准的焦点轮廓。

* 小建议：永远不要移除 CSS 轮廓
规范
--

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

参见
--

* `:focus-visible`
* `:focus-within`
<position>
==========

CSS `<position>`（或 **`<bg-position>`**）数据类型表示用于设置相对于元素盒子的位置的 2 维空间中的坐标。它被用于 `background-position` 和 `offset-anchor` (en-US) 属性。

**备注：** 由 `<position>` 值表述的最终位置并不需要位于元素的盒子中。

语法
--

![显示各类值放置的网格。0 0 是左上角。right、right center、center left 100% 和 top 50% left 100%，这四个值是等价的都在垂直方向中间的右侧边缘。top 75px left 100px 和 left 100px top 75px，这两个值是相同的。bottom left 25% 与 top 100% left 25% 相同。](/zh-CN/docs/Web/CSS/position_value/position_type.png)

`<position>` 数据类型可用一个或两个关键字（可带有偏移量）指定。

关键字值为：中（`center`）、上（`top`）、右（`right`）、下（`bottom`）、左（`left`）。每个关键字代表元素盒子的边缘或两个边缘之间的中心线。根据上下文，`center` 可以表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心。

如果指定了偏移量，其值可以是相对值 `<percentage>` 或绝对值 `<length>`。正值是向右或向下的偏移，取决于应用的边缘。负值则是在相反方向上的偏移。

如果仅指定单个偏移量，则用于指定 x 轴坐标，其他轴的值默认为 `center`。


```css
/\* 单值语法 \*/
keyword                  /\* 水平或垂直位置；另一个轴默认为 center \*/
value                    /\* x 轴上的位置；y 轴默认为 50% \*/

/\* 2 值语法 \*/
keyword keyword          /\* 每个方向一个关键字（顺序无关） \*/
keyword value            /\* 水平位置为关键字，垂直位置为值 \*/
value keyword            /\* 水平位置为值，垂直位置为关键字 \*/
value value              /\* 每个方向一个值（先水平然后垂直） \*/

/\* 4 值语法 \*/
keyword value keyword value /\* 每个值都是其前面的关键字的偏移量 \*/
```


**备注：** `background-position` 属性也接受三值语法。这无法在其他使用 `<position>` 的属性中使用。

插值
--

横坐标值和纵坐标值都独立进行插值。而由于两者插值速度都由同一缓动函数定义，点将沿一条直线移动。

形式语法
----
```

<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 有效位置值
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### 无效位置值
```

left right
bottom top
10px 15px 20px 15px
```

规范
--

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

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

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

参见
--

* CSS 值与单位
* CSS 值与单位介绍
* `background-position`
* `radial-gradient()`
* `conic-gradient()`
border-inline-end-color
=======================

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

尝试一下
----

语法
--


```css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

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


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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-inline-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-inline-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-rendering` CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

**备注：** 该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox）和 Webkit（Chrome、Safari）内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。

一个视觉上很明显的效果是，`optimizeLegibility` 属性值会在某些字体（比如，微软的 *Calibri*、*Candara*、*Constantia* 和 *Corbel*，或者 *DejaVu* 系列字体）小于 20px 时把某些相邻字符连接起来（比如 ff、fi、fl 等）。

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

语法
--


```css
/\* Keyword values \*/
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/\* Global values \*/
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
text-rendering: revert-layer;
text-rendering: unset;
```

### 值

`auto`

浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。

`optimizeSpeed`

浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度。它会使字间距和连字无效。

`optimizeLegibility`

浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度。它会使字间距和连字有效。**该属性值在移动设备上会造成比较明显的性能问题**，详细查看 text-rendering。

`geometricPrecision`

浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

**提示**: WebKit 准确地的实现了这个值，但是 Gecko 把这个值按照 `optimizeLegibility` 处理。

示例
--


```css
/\* make sure all fonts in the HTML document display in all its glory,
 but avoid inadequate ligatures in class foo elements \*/

body {
  text-rendering: optimizeLegibility;
}
.foo {
  text-rendering: optimizeSpeed;
}
```


#### Live Example

**备注：** 没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 text-rendering。


| CSS code | Kerning | Ligatures |
| --- | --- | --- |
| font: 19.9px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
| font: 20px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
| font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed; | LYoWAT | ff fi fl ffl |
| font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility; | LYoWAT | ff fi fl ffl |

### Gecko 注释

auto 选项的 20px 字体大小的阈值可以被 `browser.display.auto_quality_min_font_size` 值改变。

`optimizeSpeed` 选项在 Gecko 2.0 上已经没有效果了，因为标准的文字渲染代码已经非常快，而且目前还没有更快的渲染方法。详见 Firefox bug 595688。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextRenderingProperty |

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

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

**`padding`** CSS 简写属性控制元素所有四条边的内边距区域。

尝试一下
----

一个元素的内边距区域指的是其内容与其边框之间的空间。

**备注：** 内边距控制的是元素内部空出的空间。相反，`margin` 操作元素 *外部*空出的空间。

属性构成
----

该属性是以下属性的简写：

* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`
语法
--


```css
/\* 应用于所有边 \*/
padding: 1em;

/\* 上边下边 | 左边右边 \*/
padding: 5% 10%;

/\* 上边 | 左边右边 | 下边 \*/
padding: 1em 2em 2em;

/\* 上边 | 右边 | 下边 | 左边 \*/
padding: 5px 1em 0 2em;

/\* 全局值 \*/
padding: inherit;
padding: initial;
padding: unset;
```


`padding` 属性接受 1~4 个值。每个值可以是 `<length>` 或 `<percentage>`。取值不能为负。

* 当只指定**一个**值时，该值会统一应用到**全部四个边**的内边距上。
* 指定**两个**值时，第一个值会应用于**上边和下边**的内边距，第二个值应用于**左边和右边**。
* 指定**三个**值时，第一个值应用于**上边**，第二个值应用于**右边和左边**，第三个则应用于**下边**的内边距。
* 指定**四个**值时，依次（顺时针方向）作为**上边**，**右边**，**下边**，和**左边**的内边距。
### 取值

**`<length>`**

以固定值为内边距。

`<percentage>`

相对于包含块的*宽度*，以百分比值为内边距。

标准定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `padding-bottom`: `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top`: `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 |
| 计算值 | as each of the properties of the shorthand:* `padding-bottom`: the percentage as specified or the absolute length
* `padding-left`: the percentage as specified or the absolute length
* `padding-right`: the percentage as specified or the absolute length
* `padding-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

语法格式
----
```

padding =   
  <'padding-top'>{1,4}    
  
```

示例
--

### 以像素为单位设置内边距

#### HTML


```html
<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很大！</h3>
```


#### CSS


```css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
```


#### 结果

### 以像素和百分数为单位设置内边距


```css
padding: 5%; /\* 所有边：5% 的内边距 \*/

padding: 10px; /\* 所有边：10px 的内边距 \*/

padding: 10px 20px; /\* 上边和下边：10px 的内边距 \*/
/\* 左边和右边：20px 的内边距 \*/

padding: 10px 3% 20px; /\* 上边：10px 的内边距 \*/
/\* 左边和右边：3% 的内边距 \*/
/\* 下边：20px 的内边距 \*/

padding: 1em 3px 30px 5px; /\* 上边：1em 的内边距\*/
/\* 右边：3px 的内边距\*/
/\* 下边：30px 的内边距\*/
/\* 左边：5px 的内边距\*/
```

规范
--

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

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

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

参阅
--

* CSS 基础框盒模型介绍
* `padding-top`, `padding-right`, `padding-bottom`，和 `padding-left`。
* 逻辑相关的属性：`padding-block-start`，`padding-block-end`，`padding-inline-start`，和 `padding-inline-end` 与其简称 `padding-block` 和 `padding-inline`
-webkit-text-stroke-width
=========================

CSS 属性 **`-webkit-text-stroke-width`** 指定了文本的笔触宽度。

语法
--


```css
/\* 关键词值 \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* 长度值 \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

/\* 全局值 \*/
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: revert;
-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;
```

### 取值

`<line-width>`

笔触宽度。

形式定义
----

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

形式语法
----
```

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

示例
--

### 不同的笔触宽度

#### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```


#### HTML


```html
<p id="thin">细笔触</p>
<p id="medium">中笔触</p>
<p id="thick">粗笔触</p>
```


#### 结果

规范
--

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-width |

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

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

参见
--

* 宣布此特性的 Safari 博客文章
* 解释此特性的 CSS-Tricks 文章
* `-webkit-text-stroke-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`
-webkit-overflow-scrolling
==========================

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

### 概述

**`-webkit-overflow-scrolling`** 属性控制元素在移动设备上是否使用滚动回弹效果。

### 值

`auto`

使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。

`touch`

使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

### 示例


```css
-webkit-overflow-scrolling: touch; /\* 当手指从触摸屏上移开，会保持一段时间的滚动 \*/

-webkit-overflow-scrolling: auto; /\* 当手指从触摸屏上移开，滚动会立即停止 \*/
```

### 规范

尚未有相关规范。另在 Apple 提供的Safari CSS 参考文档中有所提及。

### 浏览器兼容性

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scroll-padding-inline
=====================

简写属性 **`scroll-padding-inline`** 设置了元素的行向滚动内边距。

尝试一下
----

滚动内边距属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

属性构成
----

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

* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
语法
--


```css
/\* 关键字值 \*/
scroll-padding-inline: auto;

/\* <length> 值 \*/
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;

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

### 取值

`<length-percentage>`

滚动口对应边的内边距，为有效的长度或百分比。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-padding-inline-start`: `auto`
* `scroll-padding-inline-end`: `auto`
 |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as each of the properties of the shorthand:* `scroll-padding-inline-start`: as specified
* `scroll-padding-inline-end`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-inline =   
  [ auto | <length-percentage [0,∞]> ]{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-inline |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
transform
=========

CSS **`transform`** 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

尝试一下
----

**警告：** 只能转换由盒模型定位的元素。根据经验，如果元素具有`display: block`，则由盒模型定位元素。

语法
--


```css
/\* Keyword values \*/
transform: none;

/\* Function values \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/\* Multiple function values \*/
transform: translateX(10px) rotate(10deg) translateY(5px);

/\* Global values \*/
transform: inherit;
transform: initial;
transform: unset;
```


`transform`属性可以指定为关键字值 `none` 或一个或多个 `<transform-function>` 值。

### 值

`<transform-function>`

要应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

`none`

不应用任何变换。

### 语法格式
```

transform =   
  none              |  
  <transform-list>    
  
<transform-list> =   
  <transform-function>+    
  
```

示例
--

### HTML


```html
<div>Transformed element</div>
```

### CSS


```css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
```

### 结果

有关更多示例，请参阅使用 CSS 变换和`<transform-function>`。

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of bounding box |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

参见
--

* Using CSS transforms (en-US)
* `<transform-function>` data type
* A cross-browser 2D transform plugin for jQuery
::-webkit-slider-thumb
======================

总结
--

**`::-webkit-slider-thumb`**

这是 type 为 range 的 input 标签内的一种伪类样式，用于设置 range 的滑块的具体样式，该伪类只在内核为 webkit/blink 的浏览器中有效

使用方式
----

该伪类需要配和 **::-webkit-slider-runnable-track** 使用，否则会没有效果


```css
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /\*清除默认样式\*/
  height: 7vw; /\*设置滑块高度\*/
  width: 5vw; /\*设置滑块宽度\*/
  background: #000; /\*设置背景色\*/
  border-radius: 10vw 10vw; /\*加个圆角边\*/
  margin-top: -1vw; /\*使用 position 的话会导致滑块不滑动，但是绑定的 value 是改变的，所以这里使用 margin-top 去做定位\*/
}

input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 30px;
  background: #128;
  height: 15px;
}
```

规范
--

这不是任何规范中的一部分，这是 webkit/bink 内核特有的 (chrome/safari)

参见
--

* ::-webkit-slider-runnable-track
* 其他浏览器内与该功能类似的伪类
    + ::-moz-range-thumb
    + ::-ms-thumb
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
scrollbar-width
===============

**`scrollbar-width`** 属性允许开发者在元素显示滚动条时设置滚动条的最大宽度。

语法
--


```css
/\* 关键字值 \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

### 取值

*<scrollbar-width>*

将滚动条的宽度定义为数值宽度或者预定义宽度，当被定义为预定义宽度时，则必须为下列值之一：

|  |  |
| --- | --- |
| `auto` | 系统默认的滚动条宽度。 |
| `thin` | 系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度。 |
| `none` | 不显示滚动条，但是该元素依然可以滚动。 |

**备注：** 用户代理必须将应用于根元素的任何 `scrollbar-width` 值应用于视口。

无障碍考虑
-----

请注意使用此属性时需谨慎。如果开发者未提供替代的滚动机制，将 `scrollbar-width` 设置为 `thin` 或 `none` 可能会使内容难以或无法滚动。虽然在这种情况下，滑动手势或鼠标滚轮可以启用滚动，但某些设备没有滚动替代方案。

WCAG 标准 2.1.1（键盘）已经存在很长时间，以便为基本键盘可访问性提供建议，并且这应该包括内容区域的滚动。在 WCAG 2.1 中引入的标准 2.5.5（目标大小）建议触摸目标的宽度和高度至少为 44 像素（尽管在高分辨率屏幕上这个问题会更严重，建议进行全面测试）。

* MDN 理解 WCAG，指南 2.1 解释 (en-US)
* MDN 理解 WCAG，指南 2.5 解释 (en-US)
* 理解成功标准 2.1.1 | W3C 理解 WCAG 2.1
* 理解成功标准 2.5.5 | W3C 理解 WCAG 2.1
形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scrolling boxes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scrollbar-width =   
  auto  |  
  thin  |  
  none    
  
```

示例
--

### 调整溢出滚动条的大小

#### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
```


#### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |

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

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

参见
--

* `::-webkit-scrollbar`
:right
======

**`:right`** CSS 伪类必须与@规则 `@page` 一起配套使用，表示打印文档的所有右页。


```css
/\* 当打印时会选择所有文档右页 \*/
@page :right {
  margin: 2in 3in;
}
```


这里的“左”或“右”不是固定的，取决与文档的写作方向。如果第一页主要文字方向是从左到右的，那么它就是`:right`右页，反之它就是`:left`左页。

**备注：** Note: 可通过 `bdo` 标签 的 `dir` 属性改变文字方向。

**备注：** 此伪类只能用于更改页面的 `margin`, `padding`, `border`, and `background` 属性。其他属性都将被忽略，只会影响页框，不会影响文档内容。

语法
--
```

@page:right{
    margin: * *;
}
```

示例
--


```css
@page :right {
  margin: 2in 3in;
}
```

规范
--

| 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`
* Other page-related pseudo-classes: `:first`, `:left`
border-image-outset
===================

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

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

* Learn more
* See full compatibility
* Report feedback
概述
--

`border-image-outset` 属性定义边框图像可超出边框盒的大小。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

语法
--
```

Formal syntax: 
```
border-image-outset =   
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}    
  
```


```
```

/* border-image-outset: sides */
border-image-outset: 30%;

/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;

/* border-image-outset: 顶 水平 底 */
border-image-outset: 30px 30% 45px;

/* border-image-outset:顶 右 底 左  */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;
```

### 值

*sides*

边框图像在四个方向超出边框盒的`<length>`或`<number>`数量。

*horizontal*

边框图像在水平方向（左和右）超出边框盒的`<length>`或`<number>`数量。

*vertical*

边框图像在垂直方向（上和下）超出边框盒的`<length>`或`<number>`数量。

*top*

边框图像在上方超出边框盒的`<length>`或`<number>`数量。

*bottom*

边框图像在下方超出边框盒的`<length>`或`<number>`数量。

*right*

边框图像在右方超出边框盒的`<length>`或`<number>`数量。

*left*

边框图像在左方超出边框盒的`<length>`或`<number>`数量。

`inherit`

四个方向的值都继承于父元素的该属性计算后值。

规范
--

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

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

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