recursal/MDN huggingface dataset:
text-justify
============

CSS 属性 **`text-justify`** 定义的是当文本的 `text-align` 属性被设置为 `:justify` 时的齐行方法。


```css
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /\* 已被废除，不提倡使用 \*/
```


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

语法
--

`text-justify` 属性的值只能取下面列表中的单个关键词值。

### 值

`none`

表示关闭掉齐行的设置。表现的效果和没有设置 `text-align` 一样，当你因为某种原因需要在已经设置了 `text-align` 的元素上禁用齐行效果的时候，这个属性值很有用。

`auto`

默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 `text-justify` 进行设置的话，则是默认使用这样子的对齐规则。

`inter-word`

通过在文本中的单词之间添加空间来实现行对齐（这将会改变 `word-spacing` 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。

`inter-character`

通过在文本中的字符之间添加空间来实现行对齐（这将会改变 `letter-spacing` 的值），比如日语就是最适合使用这个属性的语言。

`distribute` 
已弃用

显示效果与设置了 `inter-word` 一致，不提倡使用这个属性，现在这个属性或许还能有效果，但那完全是为了向后兼容而被保留着。

### 语法
```

text-justify =   
  auto             |  
  none             |  
  inter-word       |  
  inter-character    
  
```

示例
--
```

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
```



```css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}
```

规范
--

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

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

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

参见
--

* `text-align`
scroll-margin-inline-end
========================

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

尝试一下
----

语法
--


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

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

### 取值

`<length>`

滚动容器的行末外边距。

形式定义
----

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

形式语法
----
```

scroll-margin-inline-end =   
  <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: end;
}

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


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

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


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

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 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 滚动吸附明确控制滚动
border-inline-end-style
=======================

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

尝试一下
----

语法
--


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

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


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

### 取值

`<'border-style'>`

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

形式定义
----

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

形式语法
----
```

border-inline-end-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-end-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`
border-bottom-color
===================

概述
--

**`border-bottom-color`** 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 `border-color` 或 `border-bottom` 更方便实用。

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

语法
--


```css
border-bottom-color: yellow;
border-bottom-color: #f5f6f7;
```

### 值

`<color>`

一个描绘底边的颜色的 CSS `<color>` 值。

`inherit`

一个代表父元素底边颜色的关键字（可能和 `border-bottom-color` 默认值不同）

### 正式语法
```

border-bottom-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 一个带有边框的简单 div

#### HTML 内容


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS 内容


```css
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 结果

规范
--

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

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

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

参见
--

* 边框相关的 CSS 简写属性 `border`, `border-bottom` 和 `border-color` 。
* 用于其他边框颜色相关的 CSS 属性： `border-right-color`, `border-top-color`, 和 `border-left-color` 。
* 同样用于底边的其他边框相关的 CSS 属性： `border-bottom-style` 和 `border-bottom-width` 。
sqrt()
======

CSS 函数 **`sqrt()`** 为指数型函数，返回某数的平方根。

函数 `pow(x, 0.5)` 等价于 `sqrt(x)`。

语法
--


```css
/\* <number> 值 \*/
width: calc(100px * sqrt(9)); /\* 300px \*/
width: calc(100px * sqrt(25)); /\* 500px \*/
width: calc(100px * sqrt(100)); /\* 1000px \*/
```

### 参数

`sqrt(x)` 函数仅接受一值作为其参数。

`x`

解析为大于等于 0 的 `<number>` 的计算式。

### 返回值

返回 `<number>`，为 `x` 的平方根。

* 若 `x` 为 `+∞`，则结果为 `+∞`。
* 若 `x` 为 `0⁻`，则结果为 `0⁻`。
* 若 `x` 小于 `0`，则结果为 `NaN`。
### 形式语法
```

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

示例
--

### 根据平方根缩放尺寸

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

#### HTML


```html
<div class="boxes">
  <div class="box">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` 所计算的为 `--size-0` 的值（50px）乘以 4 的平方根（2），结果为 100px。
* `--size-2` 所计算的为 `--size-0` 的值（50px）乘以 9 的平方根（3），结果为 150px。
* `--size-3` 所计算的为 `--size-0` 的值（50px）乘以 16 的平方根（4），结果为 200px。


```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /\* 100px \*/
  --size-2: calc(var(--size-0) * sqrt(9)); /\* 150px \*/
  --size-3: calc(var(--size-0) * sqrt(16)); /\* 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()`
* `hypot()`
* `log()`
* `exp()`
mask-border-repeat
==================

**`mask-border-repeat`** CSS 属性设置如何调整源图像的边缘区域以适应元素遮罩边框的尺寸。

语法
--


```css
/\* Keyword value \*/
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/\* vertical | horizontal \*/
mask-border-repeat: round stretch;

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


可以从下面的列表中选择一个或两个值来指定 `mask-border-repeat` 属性。

* 指定一个值时，它会在**四个边**应用相同的行为。
* 指定**两个**值时，第一个应用于**顶部和底部**，第二个应用于**左侧和右侧**。
### Values

`stretch`

拉伸源图像的边缘区域以填充每个边界之间的间隙。

`repeat`

源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以裁剪平铺图形以达到合适的贴合效果。

`round`

源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以拉伸平铺图形以实现适当的贴合。

`space`

源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。平铺图形之间将分配额外的空间，以实现适当的贴合。

### 正式语法
```

mask-border-repeat =   
  [ stretch | repeat | round | space ]{1,2}    
  
```

规范
--

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

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

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

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

这些关键词定义一个元素到底是否产生显示盒（display boxes）。

语法
--

有效的 `<display-box>` 值：

`contents` 
实验性

这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意 CSS 层次 3 显示规格定义的 `contents` 值应该怎样影响"非常见元素" - 即不由 CSS 渲染的元素（诸如被取代元素）。参考 Appendix B: Effects of display: contents on Unusual Elements 以获取细节。

由于浏览器中有个 bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 Accessibility concerns 章节以获取细节。

`none`

关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。

要一个元素占据空间（文件中存在），但不渲染，请使用 `visibility` 属性。

示例
--

在第一个例子中，带有 secret 类的段落，会被设置成 `display: none`; 该盒子和内容不会渲染。

### display: none

#### HTML


```html
<p>Visible text</p>
<p class="secret">Invisible text</p>
```


#### CSS


```css
p.secret {
  display: none;
}
```


#### 结果

### display: contents

在本例中，其外部 `<div>` 有一个 2px 红色边框 和 300px 的宽度。然而，它有 `display: contents` 因而指定这个 `<div>` 不会渲染，边框和宽度都没有，其子元素会显示。

#### HTML


```html
<div class="outer">
  <div>Inner div.</div>
</div>
```


#### CSS


```css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}
```


#### 结果

Accessibility concerns
----------------------

目前在大多数浏览器中的实现，是会从删除 accessibility tree 删除 `display` 属性值为 `contents` 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 CSSWG specification的行为要求。

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
浏览器兼容性
------

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

参见
--

* `display`
    + `<display-outside>`
    + `<display-inside>` (en-US)
    + `<display-listitem>` (en-US)
    + `<display-internal>`
    + `<display-legacy>`
* Display: Contents Is Not a CSS Reset | Adrian Roselli
* More accessible markup with display: contents — hiddedevries.nl
border-width
============

概要
--

**`border-width`** 属性可以设置盒子模型的边框宽度。

尝试一下
----

它是`border-top-width`, `border-right-width`, `border-bottom-width` 和 `border-left-width`的简写;

语法
--


```css
/\* 用法一：明确指定宽度值 \*/
/\* 当给定一个宽度时，该宽度作用于选定元素的所有边框 \*/
border-width: 5px;
/\* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 \*/
border-width: 2px 1.5em;
/\* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 \*/
border-width: 1px 2em 1.5cm;
/\* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用） \*/
border-width: 1px 2em 0 4rem;

/\* 用法二：使用全局关键字 \*/
/\* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） \*/
border-width: inherit;

/\* 用法三：使用作用于 border-width 的关键字 \*/
border-width: thin;
border-width: medium;
border-width: thick;
```

### 正式语法
```

border-width =   
  <line-width>{1,4}    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```


| 关键字 | 实例 | 说明 |
| --- | --- | --- |
| `thin` |  | 细边线 |
| `medium` |  | 中等边线 |
| `thick` |  | 宽边线 |

**备注：** 规范并没有规定关键字的实际值故在不同浏览器效果是不一样的，但显然 thin≤medium≤thick，并且值在单个文档中是恒定的

示例
--

### A mix of values and lengths

HTML


```html
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="treval">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="fourval">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  right
</p>
```


#### CSS


```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```


#### 运行结果

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

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

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

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

参考
--

* The border-related shorthand properties: `border`, `border-style`, `border-color`
* The border-width-related properties: `border-bottom-width`, `border-left-width`, `border-right-width`, `border-top-width`
font-palette
============

**`font-palette`** CSS 属性允许用户代理指定某个字体所包含众多调色板中的其中一个。用户还可以通过使用 @font-palette-values (en-US) @ 规则来覆盖调色板中的值或创建一个新的调色板。

语法
--


```css
/\* 使用字体定义的调色板 \*/
font-palette: normal;

/\* 使用用户定义的调色板 \*/
font-palette: --one;
```

### 值

`normal`

使用字体制作者设定的字体默认调色板或默认字形着色方式。如果使用了该项设置，会渲染字体中位于 0 号索引的调色板。

`light`

指定字体中第一个与“light”匹配的调色板，并作用于当前字体。某些字体包含可确定适用于浅色（接近白色）背景的元数据，如果一个字体没有该元数据，则 `light` 值的表现等同于 `normal`。

`dark`

指定字体中第一个与“dark”匹配的调色板，并作用于当前字体。某些字体包含可确定适用于深色（接近黑色）背景的元数据，如果一个字体没有该元数据，则该值的表现等同于 `normal`。

`<palette-identifier>`

允许使用 @font-palette-values (en-US) @ 规则指定字体调色板的自定义值。该值使用 <dashed-ident> (en-US) 格式指定。

形式定义
----

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

形式语法
----
```

font-palette =   
  normal                |  
  light                 |  
  dark                  |  
  <palette-identifier>  |  
  <palette-mix()>         
  
<palette-mix()> =   
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )    
  
<color-interpolation-method> =   
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]    
  
<rectangular-color-space> =   
  srgb          |  
  srgb-linear   |  
  display-p3    |  
  a98-rgb       |  
  prophoto-rgb  |  
  rec2020       |  
  lab           |  
  oklab         |  
  xyz           |  
  xyz-d50       |  
  xyz-d65         
  
<polar-color-space> =   
  hsl    |  
  hwb    |  
  lch    |  
  oklch    
  
<hue-interpolation-method> =   
  [ shorter | longer | increasing | decreasing ] hue    
  
```

示例
--

### 指定暗色调色板

本示例允许在网页中指定第一个被字体制作者标记为 *dark* 的调色板，它在接近黑色的背景上显示效果最好。


```css
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-palette-prop |

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

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

参见
--

* `@font-palette-values` (en-US)
* `base-palette` (en-US) 描述符
* `font-family` (en-US) 描述符
* `override-colors` (en-US) 描述符
background-blend-mode
=====================

概述
--

`background-blend-mode` CSS 属性定义该元素的背景图片，以及背景色如何混合。

混合模式应该按`background-image` CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

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

语法
--
```

Formal syntax:  
```
background-blend-mode =   
  <mix-blend-mode>#    
  
```


```
```

/* 单值 */
background-blend-mode: normal;

/* 双值，每个背景一个值 */
background-blend-mode: darken, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
```

### 值

`<blend-mode>`

一个定义混合的模式，可以有多个值，用逗号间隔。

示例
--
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```



```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```



```js
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

规范
--

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

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

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

参见
--

* `<blend-mode>`
* `mix-blend-mode`
font-size-adjust
================

概述
--

`font-size-adjust` CSS 属性定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。

当`font-family`的首选字体不可用时，如果备选字体的尺寸比（小写字母的大小与字体大小的比）有较大的差别时，可读性可能会成为一大问题。

为了兼容于不支持 `font-size-adjust` 的浏览器，该属性的值应该被定义为 `font-size` 的值所要乘的系数。这意味着定义的值应该为首选字体的尺寸比。例如，样式表这样定义


```css
font-size: 14px;
font-size-adjust: 0.5;
```


的真实作用是定义小写字母的大小应该为 `7px` 高（0.5 × 14px）。

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

语法
--


```css
/\* 仍使用 font size 的值 \*/
font-size-adjust: none;

/\* 使用小写字母大小为 font size 一半大小的字体大小 \*/
font-size-adjust: 0.5;

font-size-adjust: inherit;
```

### 值

`none`

仅根据`font-size`属性决定字体大小。

`<number>`

根据使小写字母大小（根据字体的 x-height--西文字体设计中的基线与主线的距离--决定）为该值乘以`font-size`的结果定义字体。

数字应为`font-family`的首选字体的尺寸比（x-height 和字体大小的比）。这意味着当首选字体可用时，不论浏览器是否支持 font-size-adjust，都会显示文字为`font-size`的大小。

### 正式语法
```

font-size-adjust =   
  none            |  
  <number [0,∞]>    
  
```

示例
--

查看在线演示


```css
p {
  font:
    12px Verdana,
    "DejaVu Sans",
    sans-serif;
  font-size-adjust: 0.58;
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 5 # font-size-adjust-prop |

`font-size-adjust` CSS 属性最初在 CSS 2 中被定义，但在 CSS 2.1 被放弃。后又被新添加至 CSS 3。

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

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

参见
--

* David Baron about font-size-adjust