recursal/MDN huggingface dataset:
font-synthesis
==============

**`font-synthesis`** CSS 属性控制浏览器可以合成（synthesize）哪些缺失的字体，粗体或斜体。

尝试一下
----

大多数标准西方字体包含斜体和粗体变体，但许多新颖（novelty）的字体不包括这些。用于中文、日文、韩文和其他语标文字（logographic script）的字体往往不含这些变体，同时，从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下，可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

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

语法
--

此属性（的值）可采用下列任意一种形式：

* 关键词 `none`
* 关键词 `weight` 或 `style`
* 关键词 `weight` 和 `style`。
### 属性值

`none`

此关键词表示不合成粗体字型（typeface）或斜体字型。

`weight`

此关键词表示，如果需要的话，可以合成粗体字型。

`style`

此关键词表示，如果需要的话，可以合成斜体字型。

### 形式化语法
```

font-synthesis =   
  none                                           |  
  [ weight || style || small-caps || position ]    
  
```

示例
--

### HTML


```html
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>
```

### CSS


```css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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

CSS 属性 **`min-inline-size`** 根据元素的书写模式定义了元素区块的横向或纵向最小尺寸。根据 `writing-mode` 的值，此属性对应于 `min-width` 或 `min-height` 属性。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> 值 \*/
min-inline-size: 10%;

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

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


若为纵向书写模式，则 `min-inline-size` 的值对应于元素的最小高度；否则对应于元素的最小宽度。与此相关的属性为 `min-block-size`，此属性定义了元素另一方向的尺度。

### 取值

`min-inline-size` 属性的取值与 `min-width` 和 `min-height` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | same as `width` and `height` |
| 是否是继承属性 | 否 |
| Percentages | inline-size of containing block |
| 计算值 | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

形式语法
----
```

min-inline-size =   
  <'min-width'>    
  
```

示例
--

### 为竖排文本设置最小行向尺寸

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

参见
--

* 对应的实体属性：`min-width` 和 `min-height`
* `writing-mode`
color-scheme
============

**`color-scheme`** CSS 属性允许元素指示它可以舒适地呈现哪些颜色方案。

操作系统颜色方案的常见选择为“亮色”和“暗色”，或“日间模式”和“夜间模式”。当用户选择其中一种颜色方案时，操作系统会对用户界面进行调整，包括表单控件、滚动条和 CSS 系统颜色的使用值。

尝试一下
----

语法
--


```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

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


`color-scheme` 属性的值必须是以上关键字之一。

### 取值

`normal`

表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。

`light`

表示可以使用操作系统亮色配色方案渲染元素。

`dark`

表示可以使用操作系统深色配色方案渲染元素。

`only`

禁止用户代理覆盖元素的颜色方案。

可以使用 `color-scheme: only light;` 应用于特定的元素或 `:root`，以关闭由 Chrome 的自动深色主题引起的颜色覆盖。

形式定义
----

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

形式语法
----
```

color-scheme =   
  normal                                       |  
  [ light | dark | <custom-ident> ]+ && only?    
  
```

示例
--

### 应用配色方案

要将整个页面配置为使用用户的配色方案首选项，请在 `:root` 元素上指定 `color-scheme`。


```css
:root {
  color-scheme: light dark;
}
```

规范
--

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

参见
--

* `prefers-color-scheme` 媒体查询来检测用户对配色方案的偏好。
* 使用 CSS 将颜色应用于 HTML 元素
* 其他与颜色相关的属性：`color`、`background-color`、`border-color`、`outline-color`、`text-decoration-color`、`text-emphasis-color` (en-US)、`text-shadow`、`caret-color` 和 `column-rule-color`
* `background-image`
* `print-color-adjust` (en-US)
border-inline-start-color
=========================

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

尝试一下
----

语法
--


```css
border-inline-start-color: red;
border-inline-start-color: #ee4141;

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


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

### 取值

`<'color'>`

边框颜色。见 `color`。

形式定义
----

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

形式语法
----
```

border-inline-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-inline-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`
自定义属性（--\*）：CSS 变量
==================

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
带有前缀 `--` 的属性名，比如 `--example--name`，表示的是带有值的自定义属性，其可以通过 `var()` 函数在全文档范围内复用的。

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

|  |  |
| --- | --- |
| 初始值 | see prose |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified with variables substituted |
| Animation type | discrete |

语法
--


```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```


`<declaration-value>`

这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。


**备注：** 自定义属性名区分大小写——`--my-color` 会被视为与 `--My-color` 不同的自定义属性。

示例
--

### HTML


```html
<p id="firstParagraph">此段落应有蓝色背景和黄色文本。</p>
<p id="secondParagraph">此段落应有黄色背景和蓝色文本。</p>
<div id="container">
  <p id="thirdParagraph">此段落应有绿色背景和黄色文本。</p>
</div>
```

### CSS


```css
:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### 结果

规范
--

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

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

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

参见
--

* 使用 CSS 变量
* `var()` 函数
scroll-margin-inline-start
==========================

**`scroll-margin-inline-start`** 属性定义了滚动吸附区域的行首外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;

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

### 取值

`<length>`

滚动容器的行首外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-inline-start =   
  <length>    
  
```

示例
--

### 简单演示

此示例所实现的内容与上述互动示例非常相似，但此处将解释其实现方法。

此处的目标为创建四个横向滚动区块，其中第二个和第三个吸附至指定位置——靠近但不恰好位于每个区块的左侧。

#### HTML

表示这些区块的 HTML 非常简单：


```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```


#### CSS

一起来过一遍 CSS。外层容器有如下样式：


```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```


与滚动吸附相关的主要部分为 `overflow-x: scroll`——确保内容可滚动且不被隐藏——以及 `scroll-snap-type: x mandatory`——要求必须沿横轴出现滚动吸附，且滚动总将止于吸附点。

子元素有如下样式：


```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```


此处最相关的部分为 `scroll-snap-align: start`——指定左侧的边（即此情形中沿 x 轴的“首侧”）为吸附点。

最后指定滚动外边距的值，为第二个和第三个子元素指定不同的值：


```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}
```


这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 行首边的 `1rem` 外处，及第三个 `<div>` 行首边的 `2rems` 外处。

#### 结果

请自行尝试：

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
background-clip
===============

`background-clip` 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

尝试一下
----

如果没有设置背景图片（`background-image`）或背景颜色（`background-color`），那么这个属性只有在边框（ `border`）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 `border-style` 或 `border-image` 有关），否则，本属性产生的样式变化会被边框覆盖。

语法
--


```css
/\* Keyword values \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/\* Global values \*/
background-clip: inherit;
background-clip: initial;
background-clip: unset;
```

### 值

`border-box`

背景延伸至边框外沿（但是在边框下层）。

`padding-box`

背景延伸至内边距（`padding`）外沿。不会绘制到边框处。

`content-box`

背景被裁剪至内容区（content box）外沿。

`text` 
实验性

背景被裁剪成文字的前景色。

### 标准语法
```

background-clip =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

示例
--

#### HTML


```html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
```


#### CSS


```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```


#### 结果

规范
--

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

|  |  |
| --- | --- |
| 初始值 | `border-box` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a repeatable list |

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

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

参见
--

* The `clip-path` property creates a clipping region that defines what part of an *entire element* should be displayed.
* Background properties: `background`, `background-color`, `background-image`
* Introduction to the CSS box model
flex-shrink
===========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS **`flex-shrink`** 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。


```css
flex-shrink: 2;
flex-shrink: 0.6;

/\* Global values \*/
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
```


|  |  |
| --- | --- |
| 初始值 | `1` |
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a number |

更多属性和定义请参见使用 CSS 弹性盒子 (en-US)

语法
--

`flex-shrink` 属性只能是一个 `<number>`。

### 取值

`<number`>

负值是不被允许的。参考 `<number>`。

### Formal syntax
```

flex-shrink =   
  <number [0,∞]>    
  
```

示例
--

### HTML


```html
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```

### CSS


```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |

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

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

参考
--

* 使用 CSS 弹性盒子 (en-US)
column-rule-width
=================

CSS 特性 `column-rule-width` 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | multicol elements |
| 是否是继承属性 | 否 |
| 计算值 | the absolute length; `0` if the `column-rule-style` is `none` or `hidden` |
| Animation type | a length |

Syntax
------
```

Formal syntax: 
```
column-rule-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```


```
```

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 1px;
column-rule-width: 2.5em;

column-rule-width: inherit;
```

### Values

<br-width>

Is a `<length>` or one of the `thin`, `medium` or `thick` keyword describing the width of the rule separating two columns.

Example
-------


```css
#header {
  column-rule-width: thick;
}
```

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crw |

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

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

**`scroll-margin-right`** 属性定义了滚动吸附区域的右外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
scroll-margin-right: 10px;
scroll-margin-right: 1em;

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

### 取值

`<length>`

滚动容器的右外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-right =   
  <length>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
:nth-last-of-type
=================

**`:nth-last-of-type()`** CSS 伪类基于元素在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素。

尝试一下
----

语法
--

`nth-last-of-type` 伪类通过单个参数来指定元素的匹配模式，从元素列表的末尾开始计数。

请参见 `:nth-last-child` 以获取更详细的语法说明。


```css
:nth-last-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

示例
--

### HTML


```html
<div>
  <span>这是一个 span。</span>
  <span>这是另一个 span。</span>
  <em>这是起强调作用的。</em>
  <span>哇，这个 span 元素变成了绿色！！！</span>
  <del>这里被删除了。</del>
  <span>这是最后一个 span。</span>
</div>
```

### CSS


```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # nth-last-of-type-pseudo |

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

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

参见
--

* `:nth-last-child`、`:nth-of-type`
scroll-padding-inline-end
=========================

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

尝试一下
----

语法
--


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

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

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

### 取值

`<length-percentage>`

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

`auto`

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-inline-end =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

参见
--

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

**CSS Scrollbars** 标准化了由 ie5 引入的废弃的滚动条颜色属性

示例
--

在这个例子里 我们选择使用一个比较细的 滚动轨道为绿色，滚动块为紫色的滚动条


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  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>
```

### 结果

参考
--

### CSS 属性

* `scrollbar-width`
* `scrollbar-color`
规范
--

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

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

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`::view-transition-group`** CSS 伪元素表示单个视图过渡组。

在视图过渡期间，`::view-transition-group` 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是 `::view-transition` 的子节点，并且有一个 `::view-transition-image-pair` 子节点。

`::view-transition-group` 在 UA 样式表中具有以下默认样式：


```css
html::view-transition-group(\*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}
```


默认情况下，该元素最初会镜像表示 `::view-transition-old` 伪元素的大小和位置，即旧视图状态。如果没有旧视图状态，则会镜像表示 `::view-transition-new` 伪元素的大小和位置，即新视图状态。

如果同时存在新旧两种视图状态，则视图过渡样式表中的样式会将该伪元素的 `width` 和 `height` 从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。

**备注：** 视图过渡样式表中的样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的设置过渡伪元素和更新伪元素样式部分。

此外，元素的变换是从旧视图状态的屏幕空间，变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的，因此此样式是动态生成的。

语法
--


```css
::view-transition-group(<pt-name-selector>) {
  /\* ... \*/
}
```


`<pt-name-selector>` 可以是以下任何值之一：

`*`

使伪元素选择器匹配所有视图过渡组。

`root`

使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 `view-transition-name` 属性分配给特定视图过渡组的元素。

`<custom-ident>`

使伪元素选择器匹配（通过 `view-transition-name` 属性将 `<custom-ident>` 分配给元素而创建的）特定视图转换组。

示例
--


```css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-group |

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

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

参见
--

* View Transitions API
* 使用 View Transitions API 实现平滑、简单的过渡
overscroll-behavior-x
=====================

**`overscroll-behavior-x`** 这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。

**备注：** 详细的解释请访问 `overscroll-behavior`


```css
/\* Keyword values \*/
overscroll-behavior: auto; /\* default \*/
overscroll-behavior: contain;
overscroll-behavior: none;

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


|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

语法
--

`overscroll-behavior-x` 属性可以选用下列值。

### 值

`auto`

默认的滚动溢出行为表现的和正常一样。

`contain`

默认的滚动溢出行为将被内部的元素观察到，(例如：“bounce”效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如：在下面的元素不会被滚动。

`none`

相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。

### 正式语法
```

overscroll-behavior-x =   
  contain  |  
  none     |  
  auto       
  
```

示例
--

在这个简单的例子中 (源代码), 有两个块级别的盒子，一个在另一个的里面。外部的盒子设置有一个大的 `width` 所以整个页面会水平滚动。内部的盒子设置有一个小的宽度 (和 `height`) 所以他位于观察点内合适的地方，但是他的内容被设置了一个大的 `width`, 所以它会水平的滚动。

默认情况下，当内部的盒子被滚动达到边界的时候，整个页面将开始滚动，这个行为有可能不是我们期望的。为了避便这个行为，你可以设置 `overscroll-behavior-x: contain` 在里面的盒子上：


```css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}
```

规范
--

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

See also
--------

* Take control of your scroll: customizing pull-to-refresh and overflow effects