recursal/MDN huggingface dataset:
min-block-size
==============

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

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

尝试一下
----

语法
--


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

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

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

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

### 取值

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

形式定义
----

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

形式语法
----
```

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

示例
--

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

#### HTML


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


#### CSS


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


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-block-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`
border-block-width
==================

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

尝试一下
----

另一方向的边框宽度可用 `border-inline-width` 设置，此属性会设置 `border-inline-start-width` 和 `border-inline-end-width`。

语法
--


```css
/\* 边框宽度值 \*/
border-block-width: 5px;
border-block-width: thick;

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

### 取值

`<'border-width'>`

边框宽度。见 `border-width`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `medium` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

形式语法
----
```

border-block-width =   
  <'border-top-width'>{1,2}    
  
```

示例
--

### 竖排文本的边框宽度

#### HTML


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


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-width: 5px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-width |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width`
* `writing-mode`、`direction`、`text-orientation`
scale
=====

CSS 属性 **`scale`** 允许你可以分别且独立地指定 CSS 属性 `transform` 缩放的比例。这更好地映射到典型的 UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。

语法
--


```css
/\* 关键值 \*/
scale: none;

/\* 单个值 \*/
/\* 设定比 1 大的数值使该元素变大 \*/
scale: 2;
/\* 设定比 1 小的数值使该元素缩小 \*/
scale: 0.5;

/\* 两个值 \*/
scale: 2 0.5;

/\* 三个值 \*/
scale: 2 0.5 2;
```

### 取值

单一数值

单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放) 函数。

两个长度/百分比值

两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。

三个长度/百分比值

三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。

`none`

指定不进行缩放。

### 形式语法
```

scale =   
  none                              |  
  [ <number> | <percentage> ]{1,3}    
  
```

示例
--

### HTML


```html
<div>
  <p class="scale">Scaling</p>
</div>
```

### CSS


```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.scale {
  transition: scale 1s;
}

div:hover .scale {
  scale: 2 0.7;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

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

概述
--

**`transform-box`** 属性定义了与 `transform`、`transform-origin` 这两个属性有关联的布局框。

语法
--


```css
/\* Keyword values \*/
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

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


`transform-box`属性被指定为以下所列出的关键字值之一。

### 值

`border-box`

border box 是用作引用框，一个表格（table）的 border-box 是 table 包装盒的边框，而不是表的边框。

`fill-box`

Uses the object bounding box as reference box.

`view-box`

Uses the nearest SVG viewport as reference box. If a `viewBox` attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

形式定义
----

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

形式语法
----
```

transform-box =   
  content-box  |  
  border-box   |  
  fill-box     |  
  stroke-box   |  
  view-box       
  
```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-box |

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

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

参见
--

* 使用 CSS 变换 (en-US)
border-inline-start-style
=========================

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

尝试一下
----

语法
--


```css
/\* 边框线型值 \*/
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: groove;

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


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

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

### 取值

`<'border-style'>`

边框线型。见 `border-style`。

形式定义
----

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

形式语法
----
```

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

示例
--

### HTML


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

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}
```

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-style |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-style`、`border-right-style`、`border-bottom-style` 或 `border-left-style`
* `writing-mode`、`direction`、`text-orientation`
outline-offset
==============

概要
--

**`outline-offset`** CSS 属性用于设置 `outline` 与一个元素边缘或边框之间的间隙。

outline 是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

The space will be transparent (the parent will determine the background).

Syntax
------


```css
/\* <length> values \*/
outline-offset: 3px;
outline-offset: 0.2em;

/\* Global values \*/
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
```

### Values

`<length>`

元素和轮廓间的宽度。详见 `<length>` . 负值将轮廓绘制在元素之内。

### Formal syntax
```

outline-offset =   
  <length>    
  
```

Examples
--------


```css
p {
  outline: dashed thin;
  /\* Move the outline 10px away from the border \*/
  outline-offset: 10px;
  border: 1px solid black;
}
```


Html


```html
<p>outline: offset 10px. Border is solid and outline is dashed</p>
```


上面的代码将产生以下效果：

另一个例子：

outline: multiple offsets;

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-offset |

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

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

CSS 简写属性 **`padding-block`** 定义了元素的逻辑块首和块末内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下
----

属性构成
----

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

* `padding-block-end`
* `padding-block-start`
语法
--


```css
/\* <length> 值 \*/
padding-block: 10px 20px; /\* 绝对长度 \*/
padding-block: 1em 2em; /\* 相对于文本尺寸 \*/
padding-block: 10px; /\* 同时设置块首和块末值 \*/

/\* <percentage> 值 \*/
padding-block: 5% 2%; /\* 相对于最近包含区块的宽度 \*/

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


`padding-block` 属性可用一个或两个值指定。若给一值，则此值同时用于 `padding-block-start` 和 `padding-block-end`。若给两值，则第一个用于 `padding-block-start` 而第二个用于 `padding-block-end`。

### 取值

`padding-block` 属性的取值与 `padding-left` 属性相同。

描述
--

根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性的值对应于 `padding-top` 和 `padding-bottom`，或者 `padding-right` 和 `padding-left` 属性。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `padding-block-start`: `0`
* `padding-block-end`: `0`
 |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as each of the properties of the shorthand:* `padding-block-start`: as `length`
* `padding-block-end`: as `length`
 |
| Animation type | a length |

形式语法
----
```

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

示例
--

### 为竖排文本设置块向内边距

#### HTML


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


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-padding-block |

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

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

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`
* `writing-mode`、`direction`、`text-orientation`
:autofill
=========

**`:autofill`** CSS 伪类将在浏览器自动填充表单中的 `<input>` 元素的值时匹配该 input 元素。如果用户编辑了该字段，则该类将不再匹配。

尝试一下
----

**备注：** 许多浏览器的用户代理样式表在其 `:-webkit-autofill` 样式声明中使用 `!important`，使它们无法被网页覆盖，除非通过 JavaScript 的方式。例如，Chrome 在其内部样式表中有以下内容：


```css
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
```


这意味着你无法在自己的样式规则中设置 `background-color`、`background-image` 或 `color` 等属性。

语法
--


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

示例
--

以下示例演示了如何使用 `:autofill` 伪类来更改浏览器自动填充后的文本框的边框。为了最佳的浏览器兼容性，建议同时使用 `:-webkit-autofill` 和 `:autofill` 伪类。


```css
input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}
```



```html
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>
```

规范
--

| Specification |
| --- |
| HTML Standard # selector-autofill |

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

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

参见
--

* Chromium issue 46543：自动填充输入文本框黄色背景高亮无法关闭
* WebKit bug 66032：允许网站开发者覆盖自动填充字段的颜色。
* Mozilla bug 740979：在具有自动填充值的输入元素上实现 `:-moz-autofill` 伪类
* 用户界面模块 Level 4：更多选择器
:first-child
============

**`:first-child`** CSS 伪类表示在一组兄弟元素中的第一个元素。

尝试一下
----

语法
--


```css
:first-child {
  /\* ... \*/
}
```

示例
--

### 基础示例

#### HTML


```html
<div>
  <p>此文本已选中！</p>
  <p>此文本未选中。</p>
</div>

<div>
  <h2>此文本未被选中：它不是一个 `p`。</h2>
  <p>此文本未被选中。</p>
</div>
```


#### CSS


```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### 结果

### 样式化列表

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

参见
--

* `:-moz-first-node` 
非标准
* `:first-of-type`
* `:last-child`
* `:nth-child()`
acos()
======

CSS 函数 **`acos()`** 为三角函数，返回介于 `-1` 和 `1` 之间的数的反余弦值。此函数含有单个计算式，此式返回表示介于 `0deg` 和 `180deg` 之间的 `<angle>` 的弧度数。

语法
--


```css
/\* 单个 <number> 值 \*/
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/\* 其他值 \*/
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));
```

### 参数

`acos(number)` 函数仅接受一值作为其参数。

`number`

解析为介于 `-1` 和 `1` 之间的 `<number>` 的计算式。

### 返回值

`number` 的反余弦值总将返回介于 `0deg` 和 `180deg` 之间的 `<angle>`。

* 若 `number` 小于 `-1` 或大于 `1`，则结果为 `NaN`。
* 若 `number` 恰为 `1`，则结果为 `0`。
### 形式语法
```

<acos()> =   
  acos( <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          
  
```

示例
--

### 旋转元素

由于 `acos()` 函数返回 `<angle>`，故可用于旋转（`rotate`）元素。

#### HTML


```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}
```


#### 结果

规范
--

| 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.

参见
--

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `atan()`
* `atan2()`
padding-top
===========

CSS 属性 **padding-top** 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。

![The effect of the CSS padding-top property on the element box](/files/4105/padding-top.svg)


```css
/\* <length> values \*/
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/\* <percentage> value \*/
padding-top: 10%;

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


|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |

语法规则
----

### 取值

`<length>`

当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。

`<percentage>`

当内边距（padding）是一个百分比的时候，百分比是和**包含块（containing block）的宽度**有关的，同样一定不能为负数。

### 正式语法
```

padding-top =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

实例
--


```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}
```

规范
--

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

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

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

参见
--

* CSS Box Model
* The `padding` shorthand property can be used to set paddings on all four sides of an element with a single declaration: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
scroll-margin-left
==================

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

尝试一下
----

语法
--


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

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

### 取值

`<length>`

滚动容器的左外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-left =   
  <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 滚动吸附明确控制滚动
<angle>
=======

CSS 数据类型 **`<angle>`** 用于表示角的大小，单位为度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）。在 `<gradient>` 和 `transform` 的某些方法等场景中有所应用。

语法
--

`<angle>` 数据类型由 `<number>` 和下列单位组成。数字与单位之间没有空格。数字为 0 时，单位可以省略。

`<angle>` 可以使用 `+` 或 `-` 开头。正数表示顺时针的角，负数表示逆时针的角。对于静态的角，同样的角度可以使用任意等效的值表示。比如 `90deg` 等于 `-270deg`，`1turn` 等于 `4turn`。而对于动态的角，比如应用了 `animation` 或 `transition` 时，显示效果则不一样。

### 单位

`deg`

度。一个完整的圆是 `360deg`。例：`0deg`，`90deg`，`14.23deg`。

`grad`

百分度。一个完整的圆是 `400grad`。例：`0grad`，`100grad`，`38.8grad`。

`rad`

弧度。一个完整的圆是 2π 弧度，约等于 `6.2832rad`。`1rad` 是 180/π 度。例：`0rad`，`1.0708rad`，`6.2832rad`。

turn

圈数。一个完整的圆是 `1turn`。例：`0turn`，`0.25turn`，`1.2turn`。

示例
--

| Angle90.png | 直角：`90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |
| Angle180.png | 平角：`180deg = 200grad = 0.5turn ≈ 3.1416rad` |
| AngleMinus90.png | 直角（逆时针）：`-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
| Angle0.png | 零角：`0 = 0deg = 0grad = 0turn = 0rad` |

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-bottom-style
===================

The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.


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

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


**备注：** The specification doesn't define how borders of different styles connect in the corners.

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

Syntax
------

The `border-bottom-style` property is specified as a single keyword chosen from those available for the `border-style` property.

### Formal syntax
```

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

Examples
--------

这是一种可显示 border-bottom-style 所有属性的标签。

#### 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: 3px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

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


#### Result

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

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

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

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

See also
--------

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