recursal/MDN huggingface dataset:
-webkit-text-stroke
===================

CSS 属性 **`-webkit-text-stroke`** 指定了文本字符的笔触宽度和笔触颜色。此属性为全称属性 `-webkit-text-stroke-width` 和 `-webkit-text-stroke-color` 的简写属性。


```css
/\* 宽度和颜色值 \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

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

属性构成
----

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

* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
语法
--

### 取值

`<length>`

笔触宽度。

`<color>`

笔触颜色。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: absolute `length`
* `-webkit-text-stroke-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: discrete
* `-webkit-text-stroke-color`: a color
 |

形式语法
----
```

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

示例
--

### 添加红色文本笔触

#### HTML


```html
<p id="example">此文本的笔触为红色的。</p>
```


#### CSS


```css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```


#### 结果

规范
--

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

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

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

参见
--

* Surfin 的 Safari 博客文章宣布了此特性
* 解释该特性的 CSS-Tricks 文章
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`
contain-intrinsic-block-size
============================

CSS 逻辑属性 **`contain-intrinsic-block-size`** 定义了元素受尺寸局限时浏览器用于布局的元素块向尺寸。

块向尺寸为元素在垂直于行内文本流的方向上的尺寸。在如标准英文等横向书写模式（`writing-mode`）中，块向尺寸为纵向尺度（高度）；在纵向书写模式中，块向尺寸为横向尺度。

语法
--


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

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

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

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

### 取值

元素的固有块向尺寸可指定为下列值：

`none`

元素无固有块向尺寸。

`<length>`

元素具有指定的块向尺寸，以 `<length>` 数据类型表示。

`auto <length>`

当元素在尺寸局限中且正在跳过其内容（例如元素在屏外且设置了 `content-visibility: auto`）时，块向尺寸为记忆值——即元素在上次渲染其子元素时的实际尺寸。若元素从未渲染其子元素导致无正常渲染时的元素尺寸的记忆值，或者元素未在跳过其内容，块向尺寸为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素。

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

`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-block-size =   
  auto? [ none | <length> ]    
  
```

示例
--

### 设置固有块向尺寸

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


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


下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的固有块向和行向尺寸分别使用 `contain-intrinsic-block-size` 和 `contain-intrinsic-inline-size` 同时设置。


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

规范
--

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

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

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

参见
--

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

**`visibility`** CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 `<table>` 中的行或列。

尝试一下
----

要隐藏*并从文档布局中移除*元素，请将 `display` 属性设置为 `none` 来代替 `visibility` 属性。

### 语法


```css
/\* 关键字值 \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

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


`visibility` 属性可被指定为以下值：

### 值

`visible`

元素框可见。

`hidden`

元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 `visibility` 设置为 `visible`，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。

`collapse`

`collapse` 关键字对于不同的元素有不同的效果：

* 用于 `<table>` 行、列、列组和行组，将隐藏表格的行或列，并且不占用任何空间（与将 ``display`: none` 用于表格的行/列上的效果相当）。但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
* 折叠的弹性元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除。
* 对于其他元素，`collapse` 被视为与 `hidden` 相同。

无障碍考虑
-----

将元素的 `visibility` 的值设置为 `hidden` 会将其从可访问性树中移除。这将导致元素及其所有子元素不再被屏幕阅读器所读取。

插值
--

在设置动画时，会对 visibility 在*可见*和*不可见*之间插值。因此起始值或结束值之一必须是 `visible`，否则不会发生插值 (en-US)。该值会以离散的步长进行插值，计时函数的值介于 `0` 到 `1` 之间，会被映射到 `visible`，对于其他计时函数的值（即过渡开始/结束时或 `cubic-bezier()` 函数结果的 y 值在 [0, 1] 的范围之外）则映射到较为接近的一个端点。

备注
--

有些现代浏览器对 `visibility: collapse` 不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 `visibility: hidden` 的效果。

`visibility:collapse` 会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定 `visibility: visible`。

形式定义
----

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

形式语法
----
```

visibility =   
  visible   |  
  hidden    |  
  collapse    
  
```

示例
--

### 基础示例

#### HTML


```html
<p class="visible">第一段是可见的。</p>
<p class="not-visible">第二段是不可见的。</p>
<p class="visible">第三段是可见的。注意第二段仍占用空间。</p>
```


#### CSS


```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### 表格示例

#### HTML


```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```


#### CSS


```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

### 规范

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

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

`display`参见
--

* `display`
border-top-style
================

**`border-top-style`** CSS 设置元素上边框的 `border`.

尝试一下
----

**备注：** 此规范并未定义不同样式的边框边角处如何连接。

语法
--


```css
/\* Keyword values \*/
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/\* Global values \*/
border-top-style: inherit;
border-top-style: initial;
border-top-style: unset;
```


选取以上可用关键字之一作为 `border-style` 的 **border-top-style** 属性的值。

### 形式语法
```

border-top-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

示例
--

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-top-style example classes \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-style: outset;
}
```


#### 输出结果

规范
--

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

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

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

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

参见
--

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

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

**`:-moz-broken`** CSS 伪类是一个 Mozilla 扩展 (en-US)，用于匹配表示损坏图像链接的元素。

**备注：** 这个选择器主要是为主题开发人员设计。

语法
--


```css
:-moz-broken {
  /\* ... \*/
}
```

示例
--

### HTML


```html
<img src="broken.jpg" alt="这个图像损坏了 :-(" />
```

### CSS


```css
:-moz-broken {
  background: bisque;
  padding: 8px;
}
```

### 结果

规范
--

不属于任何标准。

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

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

参见
--

* `:-moz-loading` (en-US)、`:-moz-suppressed` (en-US)、`:-moz-user-disabled` (en-US)
* Firefox bug 11011
word-break
==========

CSS 属性 `word-break` 指定了怎样在单词内断行。

尝试一下
----

语法
--
```

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;
```

### 值

`normal`

使用默认的断行规则。

`break-all`

对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

`keep-all`

CJK 文本不断行。Non-CJK 文本表现同 `normal`。

`break-word` 
已弃用

他的效果是`word-break: normal` 和 `overflow-wrap: anywhere` 的合，不论 `overflow-wrap`的值是多少。


**备注：** 与 `word-break: break-word` 和 `overflow-wrap: break-word`（详见 `overflow-wrap`）对比，`word-break: break-word` 将在文本可能溢出其容器的确切位置创建一个断点。

形式定义
----

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

形式语法
----
```

word-break =   
  normal      |  
  keep-all    |  
  break-all   |  
  break-word    
  
```

示例
--

### HTML


```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS


```css
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # word-break-property |

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

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

参见
--

* `overflow-wrap`
CSS Masking
===========

**CSS Masking** 是一个 CSS 模块，它定义了部分或完全隐藏视觉元素部分的方法，包括遮罩和剪裁。

Reference
---------

### Properties

* `clip` 
已弃用
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset` (en-US)
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source` (en-US)
* `mask-border-width`
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image`
* `mask-mode`
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat`
* `mask-size` (en-US)
* `mask-type` (en-US)
Guides
------

*None.*

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

| Specification |
| --- |
| CSS Masking Module Level 1  |
overflow-x
==========

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

Newly availableSince September 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
CSS 属性 **`overflow-x`** 设置当内容溢出块级元素的左右两侧时所显示的内容。可以不显示，或显示滚动条，或显示溢出内容。也可以使用 `overflow` 简写属性来设置该属性。

尝试一下
----

语法
--


```css
/\* 关键字值 \*/
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

/\* 全局值 \*/
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;
```


`overflow-x` 属性可指定为下列 `<overflow>` (en-US) 关键字值之一。

当 `overflow-y` 的值为 `hidden`、`scroll` 或者 `auto`，而 `overflow-x` 属性的值为 `visible`（默认值）时，该值会被隐式地计算为 `auto`。

### 取值

`visible`

溢出的内容不会被截断，且可以显示在元素边距（padding）框的左右边缘之外。元素盒子不是滚动容器。

`hidden`

如有必要，溢出的内容会被截断以从水平方向适应元素的边距框，不会显示滚动条。

`clip`

在*溢出截断边缘*（使用 `overflow-clip-margin` (en-US) 属性定义）上的溢出内容会被截断。即，距元素内边距框指定宽度（为 `overflow-clip-margin` 的 `<length>` 值，若未设置则为 `0px`）范围内的内容会溢出。`clip` 和 `hidden` 的区别是 `clip` 关键字还禁止所有滚动，包括程序性滚动（programmatic scrolling）。其不会创建新的格式化上下文。如果要创建新的格式化上下文，请将 `overflow: clip` 与 `display: flow-root` 一起使用。元素盒子不是滚动容器。

`scroll`

如有必要，溢出的内容会被截断以从水平方向适应元素的边距框。无论内容是否发生溢出，浏览器总是显示滚动条。（这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。）而打印机可能会打印溢出的内容。

`auto`

元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是，用户代理*只在*内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与 `visible` 相同，但仍然会创建新的区块格式化上下文。桌面浏览器会在内容溢出时显示滚动条。


**备注：** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `visible` |
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip |
| Animation type | discrete |

形式语法
----
```

overflow-x =   
  visible  |  
  hidden   |  
  clip     |  
  scroll   |  
  auto       
  
```

示例
--

### HTML


```html
<ul>
  <li>
    <code>overflow-block:hidden</code>——在盒外隐藏文本
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-block:scroll</code>——总是添加滚动条
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code>——必要时在盒外显示文本
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

### CSS


```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-properties |

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

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

参见
--

* `clip`、`display`、`text-overflow`、`white-space`
* CSS 溢出 (en-US)模块
* CSS 构建：溢出的内容
scroll-padding-right
====================

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

尝试一下
----

语法
--


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

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

/\* 全局值 \*/
scroll-padding-right: inherit;
scroll-padding-right: initial;
scroll-padding-right: revert;
scroll-padding-right: revert-layer;
scroll-padding-right: 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-right =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

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

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

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

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
border-image-source
===================

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
CSS 属性 **`border-image-source`** 用于声明元素的边框图片（border-image）的资源

尝试一下
----

属性 `border-image-slice` 被用于切割资源图片的区域，然后将其动态的应用到最终的边框图片

Syntax
------


```css
/\* no border-image, use the specified border-style \*/
border-image-source: none;

/\* the image.jpg is used as image \*/
border-image-source: url(image.jpg);

/\* a gradient is used as image \*/
border-image-source: linear-gradient(to top, red, yellow);

/\* Global values \*/
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
```

### Values

`none`

不会使用图片边框。会被`border-style`属性所设置的边框样式替换掉

`<image>`

用作边框的图片

### Formal syntax
```

border-image-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

请查看示例 `border-image`。

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

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

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | `none` or the image with its URI made absolute |
| Animation type | discrete |

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

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

概述
--

`isolation` CSS 属性定义该元素是否必须创建一个新的层叠上下文（stacking context (en-US)）。

该属性的主要作用是当和`background-blend-mode`属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

语法
--
```

Formal syntax:  
```
isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     |  
  isolate    
  
```


```
```

isolation: auto;
isolation: isolate;

isolation: initial;
isolation: inherit;
isolation: unset;
```

### 值

`auto`

该关键字定义只有在该元素的属性需要的时候才会创建一个新的元素栈环境。

`isolate`

该关键字定义一个新的元素栈环境会被创建。

示例
--


```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```



```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

规范
--

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

参见
--

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`
CSS Tutorials
=============

学习 CSS 可能是一项令人望而生畏的事情。我们编写了很多的 css 教程来帮助你。有些教程完全面向新手，而其他文章展现了一些 css 的复杂特性，适合拥有丰富经验的开发者。

这个页面展现了这些文章，并且带有简短的描述。这些文章按照难度分组，因此你可以选择最适合你的。

CSS 初级教程
--------

开始使用 (en-US)

这篇教程完全面向新手。假如你还没写过一行 css-这篇很适合你。这篇文章介绍了 css 的一些基础概念，引导你书写基本的 css。

使用丰富多彩的背景 (en-US)

背景是优美样式的基础。css 允许你对每个容器设置不同的背景。这篇教程会讲述 css 与背景之间是如何相互影响，以及你如何得到想要的结果。

调整背景图片 (en-US)

CSS 允许你改变元素背景图片的大小。这篇教程告诉你如何去实现。

Media Queries (en-US)媒体查询

当前存在各种不同尺寸的屏幕，不同种类的设备。当你要求你的页面在各大平台都获得一个满意的渲染效果时，媒体查询将是一块基石。

弄清楚 z-index

控制容器叠加层级是 web 开发者的一个基本需求。了解 css 的一些基础知识，z-index 将会变得小菜一碟。

CSS 中级教程
--------

CSS 2 (Level 1) 标准放出后，CSS 增加了很多新特性。有些特性比较独立，而且很酷，你只需要对 css 的基本概念有一些直观的了解就可以使用它们。

CSS Counters (en-US)

对元素及页面计数对于 CSS 来讲是一项简单的事情。学习使用`counter-reset`, `counter-increment`, `counters()`, 及`counter()`.

CSS Animations (en-US)

CSS3 动画允许你通过 keyframes (en-US)定义样式，之后在 keyframes 之间变换，来形成一个动画。

CSS Transitions

CSS3 过渡可以以动画的形式来定义很多样式的过渡，也可以控制过渡的方式

CSS Transforms

变换可以通过坐标改变元素的位置，可以使用位移，旋转等定义元素在 2D 或 3D 空间的状态。

CSS Gradients (en-US)

渐变其实是图片，可以让一个颜色柔和的过渡到另一个颜色。CSS 中有很多渐变方式：线性渐变或者径向渐变等。这篇教程会讲解怎么使用渐变。

CSS 高级教程
--------

CSS 也拥有一些特性来帮助你创建复杂的布局。虽然这特性可以使你用最简单的方式来达到布局效果，但对于那些没有太多经验的人来说，这些特性相当复杂。

CSS Multi-column layouts (en-US)

CSS3 引入了新的布局方式，可以让你简单的在元素中创建多列布局。尽管多列布局在很多设备上不常见，但多列布局在可打印页面或索引页中很有用。

CSS Flexible boxes layouts (en-US)

这个崭新的布局方式可以让容器变得灵活，使容器平滑的改变大小，对于复杂的界面来讲这是有力的工具。