recursal/MDN huggingface dataset:
mask-image
==========

**`mask-image`** CSS 属性设置了用作元素蒙版层的图像。默认情况下，这意味着蒙版图像的 alpha 通道将与元素的 alpha 通道相乘。可以使用 `mask-mode` 属性对此进行控制。


```css
/\* 关键字值 \*/
mask-image: none;

/\* <mask-source> 值 \*/
mask-image: url(masks.svg#mask1);

/\* <image> 值 \*/
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);

/\* 多个属性值 \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);

/\* 全局属性值 \*/
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
```

语法
--

### 值

`none`

默认值，透明的黑色图像层，也就是没有遮罩层。

`<mask-source>`

对 `<mask>` 或 CSS 图像的 `url()` 引用

`<image>`

用作蒙版图像层的图像值。

形式定义
----

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

形式语法
----
```

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

示例
--

### 使用 URL 设置蒙版图像

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-image |

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

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

参见
--

* CSS 中的裁剪和遮罩
* 使用 CSS 的 mask-image 属性对图像应用效果
element
=======

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

CSS 函数 **`element()`** 定义了一个从任意的 HTML 元素中生成的图像 `<image>` 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

一个特别实用的应用场景是，在某个 HTML `<canvas>` 元素中渲染图像，然后将其用作背景。

在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 `document.mozSetImageElement()` (en-US) 方法，将某个元素指定为其他元素的背景图像。

语法
--
```

element(id)
```


其中：

*id*

The ID of an element to use as the background, specified using the HTML attribute #*id* on the element.

示例
--

在支持 `-moz-element()` 的 Firefox 中，可以实地考察这些例子。

### 一个比较现实的例子

这个例子将文档中另一个隐藏的 `<div>` 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。


```html
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>
```


The `<div>` element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

### 页面预览

这个基于 Vincent De Oliveira 的示例在 `<div id="css-result">` 之中创建了 `<div id="css-source">` 的预览。

#### HTML


```html
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>
```


#### CSS


```css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

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

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

参见
--

* `image()` (en-US)
* `image-set()` (en-US)
* `<image>`
* `<gradient>`
* `element()`
* `cross-fade()` (en-US)
* `document.mozSetImageElement()` (en-US)
counters()
==========

CSS 函数 **`counters()`** 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。`counters()` 函数有两种形式：`counters(name, string)` 或 `counters(name, string, style)`。它通常和伪元素搭配使用，但是理论上可以在支持`<string>`值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。


```css
/\* Simple usage - style defaults to decimal \*/
counters(countername, '-');

/\* changing the counter display \*/
counters(countername, '.', upper-roman)
```


一个计数器本身没有可见的效果，而是通过 `counter()` 函数（和 `counters()` 函数）返回开发人员定义的字符串（或图像）从而使计数器拥有很棒的作用。

**备注：** `counter()` 函数可以与任何 CSS 属性一起使用，但是对`"content"`以外的属性的支持是试验性的，对 type-or-unit 参数的支持很少。

在使用此功能之前，请仔细检查浏览器兼容性表 。

语法
--

### Values

`<custom-ident> 自定义标识`

一个标识计数器的名称，区分大小写，并且与`counter-reset`和`counter-increment`中的“名称”相同。名称不能以两个破折号开头，并且不能为`none`, `unset`, `initial`, 或 `inherit`。

`<counter-style> 计数器样式`

计数器样式名称或 `symbols()` (en-US) 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。

`<string> 字符串`

任意数量的文本字符。非拉丁字符必须使用其 Unicode 转义序列进行编码：例如，`\ 000A9`表示版权符号。

### 形式语法
```

counters( <custom-ident>, <string>, <counter-style>? )

where
<counter-style> = <counter-style-name> | symbols()

where
<counter-style-name> = <custom-ident>
```

示例
--

### default value compared to upper Roman

#### HTML


```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```


#### CSS


```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == " counters(
      listCounter,
      ".",
      lower-roman
    );
}
```


#### 结果

### *decimal-leading-zero* compared to lower-alpha

#### HTML


```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```


#### CSS


```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(
      count,
      ".",
      lower-alpha
    );
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

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

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

参见
--

* Using CSS Counters
* `counter-set`
* `counter-reset`
* `counter-increment`
* `@counter-style`
* CSS `counter()` (en-US) function
* `::marker`
border-image-repeat
===================

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-repeat` 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

|  |  |
| --- | --- |
| 初始值 | `stretch` |
| 适用元素 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

Syntax
------
```

Formal syntax: 
```
border-image-repeat =   
  [ stretch | repeat | round | space ]{1,2}    
  
```


```
```

border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

border-image-repeat: inherit
```

### Values

*type*

`stretch`, `repeat`, `round`, `space` 选一。属于单个值的情况。

*horizontal*

`stretch`, `repeat`, `round`, `space` 选一。属于两个值的情况。

*vertical*

`stretch`, `repeat`, `round`, `space` 选一。属于两个值的情况。

`stretch`

拉伸图片以填充边框。

`repeat`

平铺图片以填充边框。

`round`

平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

`space`

平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

`inherit`

继承父级元素的计算值。

Examples
--------

不同的取值，查看 `border-image` 的示例。

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

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

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

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

CSS 属性的解析值（**resolved value** ）是 `getComputedStyle()`返回的值。对于大多数属性，它是计算值`computed value`，但对于一些旧属性（包括宽度和高度），它是使用值`used value`。有关详细信息，请参阅下面的规范链接。

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

参考
--

* CSS Reference
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素
* `window.getComputedStyle`
scroll-padding-block-start
==========================

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

尝试一下
----

语法
--


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

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

/\* 全局值 \*/
scroll-padding-block-start: inherit;
scroll-padding-block-start: initial;
scroll-padding-block-start: revert;
scroll-padding-block-start: revert-layer;
scroll-padding-block-start: 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-block-start =   
  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 滚动吸附明确控制滚动
animation-delay
===============

**`animation-delay`** CSS 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。

尝试一下
----

使用 `animation` 的简写属性通常非常方便，可以一次性设置所有动画属性。

语法
--


```css
/\* 单个动画 \*/
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/\* 多个动画 \*/
animation-delay: 2.1s, 480ms;

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

### 值

`<time>`

动画应该开始的时间偏移量，从应用动画到元素的时刻开始计算。可以用秒（`s`）或毫秒（`ms`）指定。单位是必需的。

正值表示动画应在指定的时间量过去后开始。默认值为 `0s`，表示动画应立即开始。

负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 `-1s` 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值，但起始值是隐含的，则起始值取自应用动画到元素的时刻。


**备注：** 当你在 `animation-*` 属性上指定多个逗号分隔的值时，它们将按照 `animation-name` 出现的顺序应用于动画。对于动画数量和 `animation-*` 属性值不匹配的情况，请参见设置多个动画属性值。

形式定义
----

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

形式语法
----
```

animation-delay =   
  <time>#    
  
```

示例
--

### 设置动画延迟

这个动画有 2 秒的延迟。

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 2s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### 结果

将鼠标悬停在矩形上来播放动画。

参见 CSS 动画以获取示例。

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation-delay |

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

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

参见
--

* 使用 CSS 动画 (en-US)
* JavaScript `AnimationEvent` (en-US) API
* 其他相关的动画属性：`animation`、`animation-composition` (en-US)、`animation-direction`、`animation-duration`、`animation-fill-mode`、`animation-iteration-count`、`animation-name`、`animation-play-state`、`animation-timeline` (en-US)、`animation-timing-function`
<flex>
======

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
**`<flex>`** CSS 数据类型 表示了网格（grid）容器中的一段可变长度。于 `grid-template-columns`、`grid-template-rows` 及相关属性中使用。

语法
--

`<flex>` 数据类型为一 `<number>` 后加单位 `fr`。与所有 CSS 尺寸相同，单位与数字间无空格。

示例
--


```css
1fr    /\* 使用整型 \*/
2.5fr  /\* 使用浮点 \*/
```

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # fr-unit |

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

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

参见
--

* CSS 网格布局
CSS 片段
======

**CSS 片段**模块定义了当内容被分割（fragmented）到多个页面、区域或列时的显示方式。

当行向盒子被分割为多行时，就会出现分片。当一个块在列布局容器内跨越多列，或在打印时跨越分页符时，也会出现这种情况。元素的每一个渲染的部分都称为*片段*（fragment）。

参考
--

### 属性

* `box-decoration-break`
* `break-after`
* `break-before` (en-US)
* `break-inside`
* `orphans` (en-US)
* `widows`
规范
--

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |
caption-side
============

CSS 中 **`caption-side`** 属性会将表格的标题（`<caption>`）放到规定的位置。但是具体显示的位置与表格的 `writing-mode` 属性值有关。

尝试一下
----

语法
--


```css
/\* 方向值 \*/
caption-side: top;
caption-side: bottom;

/\* 逻辑值 \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

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


`caption-side` 属性的取值必须是下面所列值中的一个。

### 取值

`top`

标题盒应置于表格上方。

`bottom`

标题盒应置于表格下方。

`block-start`

标题盒应置于表格的块首一侧。

`block-end`

标题盒应置于表格的块末一侧。

`inline-start`

标题盒应置于表格的行首一侧。

`inline-end`

标题盒应置于表格的行末一侧。

形式定义
----

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

形式语法
----
```

caption-side =   
  top     |  
  bottom    
  
```

示例
--

### 在上方和下方设置标题

#### HTML


```html
<table class="top">
  <caption>
    表格上方的标题
  </caption>
  <tr>
    <td>一些数据</td>
    <td>又一些数据</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    表格下方的标题
  </caption>
  <tr>
    <td>一些数据</td>
    <td>又一些数据</td>
  </tr>
</table>
```


#### CSS


```css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

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


#### 结果

规范
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |

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

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

**`text-shadow`** 为文字添加阴影。可以为文字与 `decoration` 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

尝试一下
----

语法
--


```css
/\* offset-x | offset-y | blur-radius | color \*/
text-shadow: 1px 1px 2px black;

/\* color | offset-x | offset-y | blur-radius \*/
text-shadow: #fc0 1px 0 10px;

/\* offset-x | offset-y | color \*/
text-shadow: 5px 5px #558abb;

/\* color | offset-x | offset-y \*/
text-shadow: white 2px 5px;

/\* offset-x | offset-y
/\* Use defaults for color and blur-radius \*/
text-shadow: 5px 10px;

/\* Global values \*/
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
```


当阴影大于一个时要用逗号区别开阴影之间的参数。

每个阴影都有两到三个 `<length>` 参数，以及一个与阴影颜色相关的 `<color>` 参数。前两个 `<length>` 参数，是以“文字中心”为原点的坐标轴，分别为 x 轴 `<offset-x>` 和 y 轴 `<offset-y>` 的值；如果有第三个 `<length>` 参数，则第三个数值为形成阴影效果的半径的数值 `<blur-radius>`。

当所给的阴影大于一个时，阴影应用的顺序为从前到后，第一个指定的阴影在顶部。

这个属性同时适用于 `::first-line` 以及 `::first-letter` 伪元素。

### 值

`<color>`

可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色，则使用用户代理自行选择的颜色，因此需要跨浏览器的一致性时，应该明确定义它。

`<offset-x> <offset-y>`

必选。这些 `<length>` 值指定阴影相对文字的偏移量。`<offset-x>` 指定水平偏移量，若是负值则阴影位于文字左侧。`<offset-y>` 指定垂直偏移量，若是负值则阴影位于文字上方。如果两者均为 `0`，则阴影位于文字正后方，如果设置了 `<blur-radius>` 则会产生模糊效果。

`<blur-radius>`

可选。这是 `<length>` 值。如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | a color plus three absolute lengths |
| Animation type | a shadow list |

形式语法
----
```

text-shadow =   
  none                            |  
  [ <color>? && <length>{2,3} ]#    
  
```

示例
--

### 简单的阴影


```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```



```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

### 多重阴影


```css
.white-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    "Bitstream Charter",
    "URW Bookman L",
    "Century Schoolbook L",
    serif;
}
```



```html
<p class="white-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

规范
--

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

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

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

参见
--

* `box-shadow`
* The `<color>` data type (for specifying the shadow color)
* 使用 CSS 为 HTML 元素应用颜色
column-rule
===========

CSS `column-rule` 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。

尝试一下
----

该简写属性使用简单方便的声明形式将各个 `column-rule-*` 属性放在了一起：`column-rule-width`、`column-rule-style` 和 `column-rule-color`。

**备注：** 和所有简写属性一样，任何没有指定的单独值会设置为相应初始值（可能会覆盖非简写属性设置的值）。

语法
--


```css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

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

### 取值

`column-rule` 属性可以按任何顺序指定为下面列出的一个、两个或三个值。

`<'column-rule-width'>`

定义为 `<length>` 或是 `thin`、`medium`、`thick` 关键字的其中一个。请参阅 `border-width`。

`<'column-rule-style'>`

请参阅 `border-style` 以获取可能的值和详细信息。

`<'column-rule-color'>`

一个 `<color>` 值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `column-rule-width`: `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| 适用元素 | multicol elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `column-rule-color`: computed color
* `column-rule-style`: as specified
* `column-rule-width`: the absolute length; `0` if the `column-rule-style` is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* `column-rule-color`: a color
* `column-rule-style`: discrete
* `column-rule-width`: a length
 |

形式语法
----
```

column-rule =   
  <'column-rule-width'>  ||  
  <'column-rule-style'>  ||  
  <'column-rule-color'>    
  
```

### 示例

### 示例一


```css
/\* 与 "medium dotted currentcolor" 相同 \*/
p.foo {
  column-rule: dotted;
}
/\* 与 "medium solid blue" 相同 \*/
p.bar {
  column-rule: solid blue;
}
/\* 与 "8px solid currentcolor" 相同 \*/
p.baz {
  column-rule: solid 8px;
}
p.abc {
  column-rule: thick inset blue;
}
```

### 示例二

#### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>
```


#### CSS


```css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}
```


#### 结果

规范
--

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

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

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

参见
--

* 多列布局
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`
mask-border-slice
=================

的CSS属性除以`掩模边界源`成区域的图像集合。这些区域用于形成元素的遮罩边框的组成部分。**`mask-border-slice`**

句法
--


```css
/\* All sides \*/
mask-border-slice: 30%;

/\* vertical | horizontal \*/
mask-border-slice: 10% 30%;

/\* top | horizontal | bottom \*/
mask-border-slice: 30 30% 45;

/\* top | right | bottom | left \*/
mask-border-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
mask-border-slice: 10% fill 7 12;

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


该`mask-border-slice`属性可使用一至四个指定`<number-percentage>`值来表示每个图像切片的位置。负值无效；大于其相应尺寸的值被钳制为`100%`。

* 当**一个**被指定的位置，它在从它们各自的两侧是相同的距离创建所有四片。
* 当**2 点**被指定的位置，所述第一值创建一个从测量的层**的顶部和底部**，所述第二创建从所测量的片**左右**。
* 当指定了**三个**位置时，第一个值创建从**顶部开始**测量的切片，第二个值创建从**左侧和右侧开始**测量的切片，第三个值创建从**底部开始**测量的切片。
* 当指定了**四个**位置时，它们创建从**上**，**右**，**下**和**左**按该顺序（顺时针）测量的切片。

`fill`如果使用了可选值，则可以将其放置在声明中的任何位置。

### 价值观

`<number>`

表示光栅图像的边缘偏移量（*像素）*和矢量图像的*坐标*。对于矢量图像，数字是相对于元素的大小，而不是源图像的大小，因此在这些情况下，通常最好使用百分比。

`<percentage>`

将边缘偏移量表示为源图像尺寸的百分比：水平偏移量的图像宽度，垂直偏移量的高度。

`fill`

保留中间图像区域。其宽度和高度的大小分别匹配顶部和左侧图像区域。

描述
--

切片过程总共创建了九个区域：四个角，四个边缘和一个中间区域。四个切片线，从其各自的侧面设置了给定的距离，以控制区域的大小。

![由 border-image 或 border-image-slice 属性定义的九个区域](/files/3814/border-image-slice.png)

上图说明了每个区域的位置。

* 1-4 区是
 拐角区域
 。每个图像都使用一次以形成最终边框图像的角。
* 5-8 区是
 边缘区域
 。在最终的边框图像中对这些元素进行重复，缩放或其他方式的修改，以匹配元素的尺寸。
* 9 区是
 中间区域
 。默认情况下将其丢弃，但如果`fill`设置了关键字，则它会用作背景图像。

`mask-border-repeat`，`mask-border-width`和`mask-border-outset` (en-US)属性决定了这些区域用于形成最终的蒙版边框。

正式定义
----

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

形式语法
----
```

mask-border-slice =   
  [ <number> | <percentage> ]{1,4} fill?    
  
```

例子
--

### 基本用法

该属性似乎在任何地方都不受支持。最终开始受支持时，它将用于定义从源图像获取的切片的大小，并用于创建边框蒙版。


```css
mask-border-slice: 30 fill;
```


基于 Chromium 的浏览器支持此属性的过时版本`mask-box-image-slice`-带前缀：


```css
-webkit-mask-box-image-slice: 30 fill;
```


**备注：** 该`mask-border`页面提供了一个有效的示例（使用 Chromium 支持的过期前缀边框蒙版属性），因此你可以大致了解效果。

**备注：** 如果希望元素的内容可见，则必须包含 fill 关键字。

规范
--

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

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

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

参见
--

* 1 到 4 值语法的图解说明