recursal/MDN huggingface dataset:
log()
=====

CSS 函数 **`log()`** 为指数型函数，返回某数的对数。

对数为指数的逆运算。固定底数的此数次方将产生传入的第一个参数。

在 CSS 中传入单个参数时，将使用以 `e`（约 `2.7182818`）为底数的自然对数，不过底数可用可选的第二个参数设置为任意值。

语法
--


```css
/\* <number> 值 \*/
width: calc(100px * log(7.389)); /\* 200px \*/
width: calc(100px * log(8, 2)); /\* 300px \*/
width: calc(100px * log(625, 5)); /\* 400px \*/
```

### 参数

`log(value [, base]?)` 函数接受以逗号分隔的两值作为其参数。

`value`

解析为大于等于 0 的 `<number>` 的计算式，表示真数。

`base`

可选。为解析为大于等于 0 的 `<number>` 的计算式，表示对数的底数。若未定义，则使用默认的对数底数 `e`。

### 返回值

在定义了 `base` 时为 `value` 的对数值。

在未定义 `base` 时为 `value` 的自然对数（以 `e` 为底数）。

### 形式语法
```

<log()> =   
  log( <calc-sum> , <calc-sum>? )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

示例
--

### 基于 `log()` 函数的尺寸

此示例展示了如何使用 `log()` 函数计算尺寸。

#### HTML


```html
<div class="boxes">
  <div class="box zero">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>
```


#### CSS

此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸（`--size-0`），再用此尺寸计算其他尺寸。

* `--size-1` 所计算的为 `log(7.389)` 的值（2）乘 `--size-0`（50px），结果为 100px。
* `--size-2` 所计算的为 `log(8, 2)` 的值（3）乘 `--size-0`（50px），结果为 150px。
* `--size-3` 所计算的为 `log(625, 5)` 的值（4）乘 `--size-0`（50px），结果为 200px。


```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * log(7.389)); /\* 100px \*/
  --size-2: calc(var(--size-0) * log(8, 2)); /\* 150px \*/
  --size-3: calc(var(--size-0) * log(625, 5)); /\* 200px \*/
}
```


```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```


再将这些尺寸应用于这些选择器的 `width` 和 `height` 值。


```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # exponent-funcs |

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

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

参见
--

* `pow()`
* `sqrt()`
* `hypot()`
* `exp()`
columns
=======

CSS 属性 **`columns`** 用来设置元素的列宽和列数。

尝试一下
----

它是一个简写属性，可在单个方便的声明中设置 `column-width` (en-US) 和 `column-count` 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

语法
--


```css
/\* Column width \*/
columns: 18em;

/\* Column count \*/
columns: auto;
columns: 2;

/\* Both column width and count \*/
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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


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

### 取值

`<'column-width'>`

理想的列宽，定义为 `<length>` 或 `auto` 关键字。实际宽度可以更宽或更窄以适合可用空间。See `column-width` (en-US)。

`<'column-count'>`

元素内容应分成的理想列数，定义为 `<integer>` 或 `auto` 关键字。如果此值和列的宽度都不是 `auto` ，则它仅指示允许的最大列数。请参阅 `column-count` 。

### 正式语法
```

columns =   
  <'column-width'>  ||  
  <'column-count'>    
  
```

例子
--

### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>
```

### CSS


```css
.content-box {
  columns: 3 auto;
}
```

### Result

规范
--

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

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `column-width` (en-US): `auto`
* `column-count`: `auto`
 |
| 适用元素 | Block containers except table wrapper boxes |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `column-width` (en-US): the absolute length, zero or larger
* `column-count`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `column-width` (en-US): a length
* `column-count`: an integer
 |

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

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

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

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

* Learn more
* See full compatibility
* Report feedback
`text-indent` 属性能定义一个块元素首行文本内容之前的缩进量。

尝试一下
----

Syntax
------
```

/* <length> 长度值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
text-indent: 15%;

/* 关键字 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
```

### Values

`<length>`

`使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能`的 `<length>` 单位。

`<percentage>`

使用包含块宽度的百分比作为缩进。

`each-line` 
实验性

文本缩进会影响第一行，以及使用<br>强制断行后的第一行。

`hanging` 
实验性

该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

### 正式语法
```

text-indent =   
  [ <length-percentage> ]  &&  
  hanging?                 &&  
  each-line?                 
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例子
--

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

### CSS


```css
p {
  text-indent: 5em;
  background: powderblue;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # text-indent-property |

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length, plus any keywords as specified |
| Animation type | a length, percentage or calc(); |

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

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

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
CSS函数 **`minmax()`** 定义了一个长宽范围的闭区间，它与CSS 网格布局一起使用。


```css
/\* <inflexible-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> values \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
```

语法
--

此函数包含两个参数，*最小值* 和 *最大值*.

每个参数分别是`<length>`、`<percentage>`、`<flex>`的一种，或者是`max-content`、`min-content`、或`auto`之一。

如果 *最大值* < *最小值*，则*最大值*被忽略并且 `minmax(最小值, 最大值)` 被看成*最小值*。`<flex>` 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

### 取值

`<length>`

非负长度。

`<percentage>`

相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。如果网格容器的长宽取决于其轴的长宽，则`<percentage>` 必须取值为`auto`。user agent 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。

`<flex>`

单位为`fr`的非负维度，指定轨道弹性布局的系数值。每个`<flex>`长度的轨道都以其系数值比例均分剩余空间。

`max-content`

表示网格的轨道长度自适应内容最大的那个单元格。

`min-content`

表示网格的轨道长度自适应内容最小的那个单元格。

`auto`

作为最大值时，等价于 `max-content`。作为最小值时，它表示轨道中单元格最小长宽 (由`min-width`/`min-height`) 的最大值。

### 形式语法
```

<minmax()> =   
  minmax( min , max )    
  
```

示例
--

### CSS


```css
#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML


```html
<div id="container">
  <div>
    Item as wide as the content,<br />
    but at most 300 pixels.
  </div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

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

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

参见
--

* 网格布局指南：*网格布局的基本概念——轨道大小和 minmax()*
* 视频教程：*Introducing minmax()*
user-select
===========

**`user-select`** CSS 属性用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。

尝试一下
----

语法
--


```css
/\* 关键字值 \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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


**备注：** `user-select` 不是继承属性，即使默认的属性值 `auto` 的表现基本上以继承为主，似乎是继承属性。甚至，WebKit/基于 Chromium 的浏览器在实现此属性时*将其作为继承属性*，但这和有关规范是相悖的，且会带来一些问题。目前，Chromium 暂时选择修复将其作为继承属性所带来的问题，使最终表现符合规范。

### 取值

`none`

元素及其子元素的文本不可选中。请注意，`Selection` 对象可以包含这些元素。

`auto`

`auto` 的具体取值取决于一系列条件，具体如下：

* 在 `::before` 和 `::after` 伪元素上，采用的属性值是 `none`
* 如果元素是可编辑元素，则采用的属性值是 `contain`
* 否则，如果此元素的父元素的 `user-select` 采用的属性值为 `all`，则该元素采用的属性值也为 `all`
* 否则，如果此元素的父元素的 `user-select` 采用的属性值为 `none`，则该元素采用的属性值也为 `none`
* 否则，采用的属性值为 `text`

`text`

用户可以选择文本。

`all`

在一个 HTML 编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。

`contain`

允许在元素内选择；但是，选区将被限制在该元素的边界之内。

**备注：** CSS UI 4 将 `element` 值重命名为 `contain`。

形式定义
----

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

形式语法
----
```

user-select =   
  auto     |  
  text     |  
  none     |  
  contain  |  
  all        
  
```

示例
--

### HTML


```html
<p>你应该可以选中这段文本。</p>
<p class="unselectable">嘿嘿，你不能选中这段文本！</p>
<p class="all">点击一次就会选中这段文本。</p>
```

### CSS


```css
.unselectable {
  -webkit-user-select: none; /\* Safari \*/
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

参见
--

* `user-select: contain` 的 polyfill
* `::selection` 伪类
* JavaScript 的 `Selection` 对象。
image-orientation
=================

CSS 属性 **`image-orientation`** 用来修正某些图片的预设方向。

**备注：**

* 该属性不是用来对图片进行任意角度旋转的，它是用来修正那些带有不正确的预设方向的图片的。因此该属性值会被四舍五入到 90 度的整数倍。
* Similarly this property is not intented to handle the layout -> portrait changing. As `image-orientation` affects only images, it won't work: the changes must happen at the layout-level

|  |  |
| --- | --- |
| 初始值 | `from-image` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | an `angle`, rounded to the next quarter turn from `0deg` and normalized, that is moduloing the value by `1turn` |
| Animation type | discrete |

语法
--
```

语法形式: 
```
image-orientation =   
  from-image           |  
  none                 |  
  [ <angle> || flip ]    
  
```


```
```

image-orientation: 0deg
image-orientation: 6.4deg     /* 非 90 度的整数倍，所以会被四舍五入到 0 度 */
image-orientation: -90deg     /* 相当于 270deg */
image-orientation: from-image /* 使用图片的 EXIF 数据 */
image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */
image-orientation: flip       /* 不旋转，只进行水平翻转 */

image-orientation: inherit
```

### 属性值

`from-image`

根据图片的 EXIF 数据来旋转图片，EXIF 中有一个控制图片旋转度的属性。

`<angle>`

图片旋转值 `<angle>` , 会被自动四舍五入到 `90deg` (`0.25turn`) 的整数倍。

`flip`

对图片进行水平翻转，先进行第二个参数执行的旋转，再进行此次翻转。

示例
--

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-orientation |

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

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

参见
--

* 其他和图片相关的 CSS 属性：`image-rendering`、`image-resolution` (en-US)。
margin-left
===========

![Area on which CSS margin-left apply](/files/4039/margin-left.svg)**`margin-left`** 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

竖直排列相邻的两个盒子模型的外边距会重叠 *margin collapsing。*

在长度 (width) 被约束这种极少情况下，( `即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义`), 左边界`会被忽略，`如果被制定为 auto 值，会有相同的计算值。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------


```css
/\* <length> values \*/
margin-left: 10px; /\* 绝对长度 \*/
margin-left: 1em; /\* 相对于字号的长度 \*/
margin-left: 5%; /\* 相对最近块元素的宽度 \*/

/\* Keyword values \*/
margin-left: auto;

/\* Global values \*/
margin-left: inherit;
margin-left: initial;
margin-left: unset;
```

### Values

`<length>`

一个固定宽度 `<length>` 值 : 可以是一个绝对宽度，e.g. in `px`, 也可以是个相对宽度，e.g. in `em`, 或者相对视窗的大小，e.g. in `vh`.

`<percentage>`

百分比值 `<percentage>` 最近的块容器的宽度 *width* .

`auto`

auto 关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto，那么最后计算的空间分布，会根据 display，float，position 属性，自动生成以下几种情况：

| Value of `display` | Value of `float` | Value of `position` | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, 除非`margin-left`和 `margin-right` 同时都设置为 `auto`。这样的话，元素就被设置为基于父元素居中。 | Block layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | Internal `table-*` elements don't have margins, use `border-spacing` instead |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | 在水平方向上有空余空间的情况下，空余的空间会被平均分给水平方向上写有 margin-left:auto 属性的元素的外边距 | Flexbox layout mode |

### Formal syntax
```

margin-left =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------
```

.content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

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

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

CSS 函数 **`sin()`** 为三角函数，返回某数的正弦值，此值介于 `-1` 和 `1` 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为 `<number>` 或 `<angle>`，即 `sin(45deg)`、`sin(0.125turn)` 和 `sin(3.14159 / 4)` 均表示同一值，约为 `0.707`。

语法
--


```css
/\* 单个 <angle> 值 \*/
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/\* 单个 <number> 值 \*/
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/\* 其他值 \*/
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
```

### 参数

`sin(angle)` 函数仅接受一值作为其参数。

`angle`

解析为 `<number>` 或 `<angle>` 的计算式。指定无单位数时，数理解为弧度数，表示 `<angle>`。

### 返回值

`angle` 的正弦值总将返回介于 `−1` 和 `1` 之间的数。

* 若 `angle` 为 `infinity`、`-infinity` 或 `NaN`，则结果为 `NaN`。
* 若 `angle` 为 `0⁻`，则结果为 `0⁻`。
### 形式语法
```

<sin()> =   
  sin( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

示例
--

### 改变盒子尺寸

在此示例中，`sin(30deg)` 将返回 `0.5`，使盒子有 `50px` 的宽度和 `50px` 的高度。


```css
div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}
```

### 控制动画时长

另一用例为控制 `animation-duration`，根据正弦值减少时长。在此示例中，动画时长将为 `1s`。


```css
div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

参见
--

* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`
animation-name
==============

**`animation-name`** CSS 属性指定一个或多个 `@keyframes` at-rule 的名称，这些 at-rule 描述了要应用于元素的动画。多个 `@keyframes` at-rule 以逗号分隔的名称列表的形式指定。如果指定的名称不匹配任何 `@keyframes` at-rule，则不会对任何属性进行动画处理。

尝试一下
----

使用简写属性 `animation` 一次性设置所有动画属性通常很方便。

语法
--


```css
/\* 单个动画 \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* 多个动画 \*/
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

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

### 取值

`none`

一个特殊的关键字，表示没有关键帧。它可用于禁用动画，而不改变其他标识符的顺序，或禁用级联的动画。

`<custom-ident>`

一个标识动画的名称。该标识符由区分大小写的字母 `a` 到 `z`、数字 `0` 到 `9`、下划线（`_`）和/或破折号（`-`）组成。第一个非破折号字符必须是一个字母。此外，在标识符开头不能有两个破折号。此外，标识符不能为 `none`、`unset`、`initial` 或 `inherit`。


**备注：** 当你在 `animation-*` 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 `animation-name` 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

形式定义
----

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

形式语法
----
```

animation-name =   
  [ none | <keyframes-name> ]#    
  
<keyframes-name> =   
  <custom-ident>  |  
  <string>          
  
```

示例
--

### 为动画命名

此动画的 `animation-name` 为 `rotate`。

#### 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;
}

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


#### 结果

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

参见 CSS 动画以获取示例。

规范
--

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

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

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-delay`、`animation-direction`、`animation-duration`、`animation-fill-mode`、`animation-iteration-count`、`animation-play-state`、`animation-timeline` (en-US)、`animation-timing-function`
:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
**`:indeterminate`** CSS 伪类表示任意的状态不确定的表单元素，例如那些将 HTML `indeterminate` 属性设置为 `true` 的复选框，以及属于某个组且该组中所有单选按钮都未选中的单选按钮，还有不确定状态的 `<progress>` 元素。


```css
/\* 选中任意的状态不确定的 <input> \*/
input:indeterminate {
  background: lime;
}
```


此选择器针对的元素是：

* `<input type="checkbox">` 元素，其 `indeterminate` 属性被 JavaScript 设置为 `true` 时。
* `<input type="radio">` 元素，当表单中具有相同`名称`值的所有单选按钮均未被选中时。
* 处于不确定状态的 `<progress>` 元素
语法
--
```

:indeterminate
```

示例
--

### 复选框和单选按钮

这个示例将特殊样式应用于与不确定表单字段关联的标签。

#### HTML


```html
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>
```


#### CSS


```css
input:indeterminate + label {
  background: lime;
}
```


```
fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
```


#### JavaScript


```js
const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```


#### 结果

### 进度条

#### HTML


```html
<progress></progress>
```


#### CSS


```css
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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

参见
--

* Web 表单——处理用户数据
* 样式化 Web 表单
* `<input type="checkbox">` 元素的 `indeterminate` 属性
* `<input>` 和实现它的 `HTMLInputElement` 接口
* `:checked` CSS 选择器可以让你根据复选框是否被选中来设置样式
scroll-padding-top
==================

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

尝试一下
----

语法
--


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

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

/\* 全局值 \*/
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: revert;
scroll-padding-top: revert-layer;
scroll-padding-top: 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-top =   
  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-top
==========

CSS 属性 **border-top**是属性 `border-top-color`, `border-top-style`, 和`border-top-width` 的三者的缩写。这些属性都是在描述一个元素的上方的边框`border`。

尝试一下
----

与所有缩写属性（shorthand properties）一样，**border-top**始终设置它可以设置的所有属性的值，即使未指定它们也是如此。它将未指定的那些设置为其默认值。这意味着


```css
border-top-style: dotted;
border-top: thick green;
```


和下面的代码效果相同：


```css
border-top-style: dotted;
border-top: none thick green;
```


在`border-top`前指定的`border-top-style`将会失效。因为`border-top-style` 默认值为`none`,故没有边界即没有指定`border-style`

Syntax
------


```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
```


这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

### Values

`<br-width>`

请参阅 `border-top-width`.

`<br-style>`

请参阅 `border-top-style`.

``<color>``

请参阅 `border-top-color`.

### 形式语法
```

border-top =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

示例
--


```html
<div>This box has a border on the top side.</div>
```



```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

规范
--

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

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

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