让我们看看 50 多个有趣的 CSS 属性和值

它可以用 CSS 实现吗？我需要 JavaScript 吗？我知道我们很多人在查看设计和交互时都会问这些问题。最近我决定深入研究 CSS 并学习所有属性。我花了大量时间阅读参考材料、编写代码，并用我的新知识找到了解决旧问题的新方法。

在我的学习过程中，我想记录并展示我发现的 50 个最有趣的属性和值。我为其中许多创建了用例，并提供了您可以查看、参考和使用的简化代码示例。我还包含了一些仍在实验中的属性，但可能很快就能使用。我还包含了一些众所周知的属性，但使用了鲜为人知的值，因此即使您已经听说过这些属性，您也可以加深对其的了解。这里还有一些浏览器特定的内容。

让我们开始吧！

all

该 all 属性 将所有其他属性（除了 unicode-bidi 和 direction）重置为其初始或继承状态。它接受以下值

initial: 将元素或元素父级的所有属性更改为其初始值
inherit: 将元素或元素父级的所有属性更改为其父级值
unset: 如果可继承，则将元素或元素父级的所有属性更改为其父级值；如果不可继承，则更改为其自身的值

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 reset: all。

angle

角度可以是某些属性的有效 CSS 值。我们经常使用类似 transform: rotate(180deg) 的内容，但“deg”不是这里唯一可能的单位。您还可以使用 grad、rad 和 turn。例如，我们的 transform: rotate(180deg) 也可以写成 transform: rotate(0.5turn)。假设您想旋转一个元素 4 次，编写 rotate(4turn) 可能是最简单的选择。

我在 Chrome 54、Opera 41、Firefox 50 和 Safari 10 中测试过它。

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 angle~。

animation-fill-mode

此属性指定动画未播放时应用于元素的样式。想象一个@keyframe动画，它淡出一个元素（从opacity: 1;到opacity 0;）。默认情况下，动画完成后，它将跳回其初始状态。

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 淡出动画。

通过使用animation-fill-mode: forwards;，我们可以使元素保持淡出状态，从而保留最终关键帧中的样式

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 淡出并保留样式。

它接受以下属性

none:（默认）动画未执行时，元素获取其初始样式
forwards: 动画将应用由最后执行的关键帧设置的值。请注意，它可能不是“100%”或“to”关键帧的状态。如果您将animation-iteration-count设置为 1.5，则最后一个关键帧将是 50% 关键帧。或者，如果animation-direction设置为反向，则最后一个关键帧将是“0%”或“from”关键帧
backwards: 将应用在动画开始时关键帧中定义的属性值
both: 动画将遵循 forwards 和 backwards 的规则
initial: 将animation-fill-mode设置为其默认值
inherit: 元素从其父级继承animation-fill-mode值

您可以在流行的库 Animate.css 中看到，.animated 类使用animation-fill-mode: both。

animation-iteration-count

此属性定义@keyframe动画重复的次数。它也可以是非整数的值，例如animation-iteration-count: 1.5，它将播放一个完整的动画循环加上半个循环。

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 animation-iteration-count。

backface-visibility

此属性指定当元素旋转时元素的“背面”是否可见。它与 3D 变换一起使用。接受以下值

visible:（默认）旋转时，元素的背面将可见
hidden: 元素的背面不可见
initial: 将属性设置为其默认值（visible）
inherit: 从其父级获取属性值

这些示例将说明这一点

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 backface-visibility。

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 backface-visibility – 翻转卡片。

background-attachment

此属性指定当您滚动页面时background-image是否保持在视口中固定，或者随页面一起滚动。

Scroll:（默认）背景固定到元素，不会随内容滚动
Fixed: 当您滚动页面（或元素）时，背景保持固定
Local: 如果元素可滚动，则随元素内容一起滚动

查看 CodePen 上 Greg Hovanesyan (@gregh) 的笔 background-attachment。

background-blend-mode

此属性指定元素的背景图像、渐变和颜色如何相互混合。例如，您可以添加background-image和background-color，然后将blend-mode设置为“lighten”。您还可以为每个背景指定多个混合模式。

可以使用以下混合模式

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• overlay

• 饱和度
• 屏幕
• 柔光

查看 Greg Hovanesyan 在 CodePen 上的笔 background-blend-mode（@gregh）。

background-clip

background-clip 属性定义了应用背景的元素区域。您可以使背景位于其边框下方，或仅填充其内容区域。

border-box:（默认）允许背景延伸到边框的外边缘
content-box: 背景被裁剪到元素的内容框
padding-box: 背景被裁剪到元素填充的外边缘，因此它应用于内容和填充，但不应用于边框下方
text: 背景被裁剪到前景文本。

查看 Greg Hovanesyan 在 CodePen 上的笔 background-clip（@gregh）。

background-origin

此属性定义背景是否仅应用于元素的内容区域，还是也应用于填充和边框区域。它与 background-clip 的区别在于，background-clip 裁剪背景，而 background-origin 调整其大小。

box-decoration-break

此属性指定当元素换行到多行时，其背景、填充、边框、盒阴影、边距和裁剪如何应用。如果我们有多行文本换行，它通常会增加元素的高度，但是，box-decoration-break 可以分别对每一行应用样式，而不是整个元素。

clone: 元素的每个片段都接收样式，盒阴影和填充分别应用于每个片段
slice: 元素的渲染方式就像元素没有被分割一样

注意：您只能在内联元素上使用 box-decoration-break。根据 MDN，您只能在 Firefox 和 Chrome 的内联元素上使用它，但我对其进行了测试，当前浏览器显示的结果有所不同。它适用于 Firefox 和 Chrome 54、Opera 41 和 Safari 10，并带有 -webkit- 前缀。

查看 Greg Hovanesyan 在 CodePen 上的笔 box-decoration-break（@gregh）。

calc()

calc() 函数可用于创建值。例如：width: calc(100% - 32px) 将使元素宽度为全宽减去 32 像素。它对于设置列宽并减去边距非常有用。无需嵌套两个元素并为父元素添加填充即可获得相同的结果。

它接受一个包含加法、减法、乘法和除法运算符的表达式。操作数可以是任何语法长度值。您甚至可以执行类似 calc(var(--someValue) / 2 - 2em) 的操作

对于不支持它的浏览器，回退方法如下所示

width: 98%; /* fallback for browsers without support for calc() */    
width: calc(100% - 1em);

column-count

column-count 属性指定元素具有的列数。column-count: 3 将元素文本（或内联-* 元素）分散到 3 列中。您可以将其应用于 inline-block 和 block 元素。这将不适用于 display: table 的元素，但适用于 display: table-cell。

还有许多其他 column-* 属性

column-gap: 属性指定列之间间隙的大小
column-rule: 是在列之间绘制的一条垂直线，在视觉上将它们分隔开。它是设置这 3 个属性的简写（它非常类似于 border-*）
column-rule-color: 指定线的颜色。该值可以是命名颜色（红色、绿色、透明）、十六进制、rgb/rgba、hsl/hsla 颜色值
column-rule-style: 指定线的样式。它接受以下值：none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
column-rule-width: 指定线的宽度，并接受命名值（thin、medium、thick）、px、em、initial、inherit 和 unset

查看 Greg Hovanesyan 在 CodePen 上的笔 columns（@gregh）。

content

content 属性与伪元素（如 ::before 和 ::after）结合使用。以下是如何使用它们的一个技巧。这是一种创建逗号分隔的 <ul> 的巧妙方法。

ul > li:not(:last-child):after {
  content: ", ";
}

counters

计数器让我们可以为元素提供数字（索引）。例如，您有一篇文章，其中包含多个主题，每个主题在开头都有一个 <h2> 标题，并且您有 <h3> 子标题。您可以自动为它们编号！

有四个属性可用于处理计数器

counter-reset: 重置或创建计数器。此属性的值是您定义的计数器的名称
counter-increment: 增加计数器。此属性的值是要增加的计数器的名称
content() 使用 :before 伪类和 content() 将索引添加到元素
counter() 函数检索计数器的值

body {
  counter-reset: heading; /* init the counter for headings (you can give it any other name) */
}
h2 {
  counter-increment: heading; /* increments the counter on every <h1> tag */
  counter-reset: subheading;  /* here we init or reset the subheading */
  /* so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 */
}
h2:before {
  content: counter(heading) " - "; /* using :before selector and counter() function we can add the index to the heading */
}
h3 {
  counter-increment: subheading; /* increment the subheading counter on every <h2> tag */
}
h3:before {
  content: counter(heading) "." counter(subheading) " - ";
}

查看 Greg Hovanesyan 在 CodePen 上的笔 counters（@gregh）。

currentColor

currentColor 关键字表示元素 color 属性的计算值。

.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}

另一个有用的技巧是允许 SVG 图标跟随按钮文本的颜色

button {
  color: red;
}
button svg {
  fill: currentColor;
} 

filter

filter 属性将视觉效果应用于元素。它带有预定义的功能，如模糊、亮度、对比度、棕褐色；您还可以应用自定义 SVG 滤镜。

查看 Greg Hovanesyan 在 CodePen 上的笔 filters（@gregh）。

您可以组合多个滤镜来实现复杂的效果。以下是一些使用滤镜重新创建 Instagram 风格的滤镜 的示例。

以下是一个技巧：您可以使用滤镜将基本颜色转换为完全不同的颜色。您可以通过操纵色相、饱和度和亮度来实现。为此，您必须将颜色从 RGB 转换为 HSL，然后减去 H、S 和 L 值。我创建了一个简单的计算器，它生成一个滤镜，将基本颜色转换为大约给定的目标颜色

查看 Greg Hovanesyan 在 CodePen 上的笔 Converting colors using filters（@gregh）。

flex

flex 属性是作为 弹性盒布局一部分的简写属性。它最常见的用法是 flex: 1;，这会促使元素占据尽可能多的空间，或者平衡它与其他也使用 flex 属性的元素所使用的空间。flex 的默认值为 0 1 auto。

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的 CSS 简写。它接受 flex-direction 的值（row、row-reverse、column、column-reverse），以及 flex-wrap 的值（nowrap、wrap、wrap-reverse）。但你也可以像这样使用它：flex-flow: row nowrap;

flex-basis

flex-basis 属性定义了弹性元素的初始大小（有点像水平弹性盒布局中的 width）。它接受像 px、em 和 auto 这样的宽度值。它也接受内在大小关键词：fill、max-content、min-content 和 fit-content，但这些目前仅在 Edge 中有效。

font-kerning

font-kerning 属性指定浏览器是否应使用字体中存储的字距调整信息或禁用它。它接受以下值

auto: 浏览器决定是否使用字体中存储的字距调整信息。
normal: 应用字距调整。
none: 阻止浏览器使用字距调整信息。

你实际上并不使用此属性手动调整字距，手动调整字距是指手动调整各个字符之间的间距。如果你需要调整所有字母之间的间距，可以使用 letter-spacing，也称为跟踪。如果你有兴趣了解更多关于在网络上实际调整字距的信息，这里有一些文章可以探索

• 高级网页排版：字距调整 由 Elliot Jay Stocks 撰写
• 网络上的字距调整 由 Bram Stein 撰写
• 网页的手动字距调整方法 由 Nathan Ford 撰写

font-smoothing

font-smoothing 属性控制如何将抗锯齿应用于字体。问题在于，在标准浏览器抗锯齿之后，你的字体可能看起来与你在设计软件中看到的略有不同。以下是 Webkit 和 Firefox 之间的情况

-webkit-font-smoothing

none: 关闭抗锯齿，以锐利边缘显示字体。
antialiased: 在像素级别平滑字体，这使浅色文本在深色背景上看起来更浅。
subpixel-antialiased: 在亚像素级别平滑字体，以便在非视网膜显示器上获得更好的外观。

-moz-osx-font-smoothing

auto: 让浏览器选择平滑方法。
grayscale: 使用灰度抗锯齿渲染文本。这会提供与 Webkit 上的“antialiased”类似的输出，并使浅色文本在深色背景上看起来更浅。

查看 Greg Hovanesyan (@gregh) 在 CodePen 上的笔 font-smoothing。

font-variant

font-variant 的值 small-caps 将使我们能够以小写大写字母显示文本。这在与 CSS ::first-line 选择器一起使用时非常有用。

查看 Chris Coyier (@chriscoyier) 在 CodePen 上的笔 font-variant。

grid

CSS 中的 网格布局 使我们能够创建二维网格，而无需使用表格和浮动时遇到的问题。现在学习是一个好主意，因为广泛的支持即将到来。

网格由容器及其内部的项目组成。然后，您必须指定如何在行和列之间分配空间。这些值表示列大小，您还可以为它们命名。

.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

请注意，在“grid-template-columns”中，第一列和第五列的宽度为 40px，第二列和第四列的宽度为 50px，中间的列将获得其余的空间。让我们看看如何在容器内部定位项目。我们实际上必须为元素设置起始点和结束点。该项目将应用以下 CSS

.item {
  grid-column-start: 2; // will start at the point where the second column starts
  grid-column-end: 5;   // will end at the point where the second column starts
  grid-row-start: 1;    // will start at the point where the first row starts
  grid-row-end: 3;      // will end at the point where the third row starts
}

hyphens

hyphens 属性指定浏览器如何对文本进行连字符分割。

none: 不应用连字符，文本将溢出容器。
auto: 浏览器将自动对文本进行连字符分割。
manual: 手动指定潜在的断点。

您可以使用两个换行符

­ – 将使浏览器知道这是文本中可能进行连字符分割的位置（如果需要）。
&amphyphen; – 即使行未断开，也将渲染连字符。

查看 Greg Hovanesyan (@gregh) 在 CodePen 上的笔 hyphens。

image-rendering

image-rendering 属性指定在缩放图像时如何渲染图像。浏览器会自动将抗锯齿应用于调整大小的图像，您可以使用这些属性来控制它。

auto:（默认）浏览器自动应用抗锯齿。
crisp-edges: 保留对比度和边缘，以便在缩放时不会平滑或模糊。
pixelated: 此值仅应用于放大图像，并使图像看起来像素化。

查看 Greg Hovanesyan (@gregh) 在 CodePen 上的笔 image-rendering。

list-style-image

虽然大多数时候我们会在 <ul> 上使用 list-style-type: none;，然后在 <li> 上应用背景，但你仍然可以考虑将 list-style-image 属性应用于 <ul> 元素，以使用图像作为列表中的标记。

ul {
  list-style-image: url('square.gif');
}

list-style-position

list-style-position 属性指定列表标记应出现在哪里。它接受两个值

inside: 标记出现在列表项内容框内。
outside: 标记出现在列表项内容框外。

object-fit

object-fit 属性指定如何将图像（<img>）元素填充到其高度和宽度所确定的盒子中。默认情况下，图像会压缩或拉伸（如果需要）以适应图像盒子的尺寸。但是使用此属性，您可以选择其他选项，使其在内部保持其比例的同时进行缩放。

fill:（默认）元素的内容被调整大小以填充整个内容框（不保持纵横比）
contain: 元素的内容适合内容框，同时保持纵横比
cover: 元素的内容适合内容框，同时保持纵横比，但填充整个空间
none: 内容不会调整大小，但使用给定的高度和宽度进行裁剪
scale-down: 在 contain 和 none 之间自动选择，选择导致对象尺寸最小的选项

查看 Greg Hovanesyan 的 CodePen 示例 object-fit（@gregh）在 CodePen 上。

如果没有 object-fit，我们将不得不使用父元素和绝对定位（以及其他属性）才能获得类似的结果

.element {
  width: 400px;
  height: 300px;
  position: relative;
}
.element img {
  position: absolute;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

使用 object-fit: contain; 它变得简单多了

img {
  width: 400px;
  height: 300px;
  object-fit: contain;
}

请注意，它在 IE11 和 Edge 14 和 15 上不起作用。Opera Mini 使用前缀 -o- 支持它。在其他浏览器上，它在没有任何前缀的情况下都能很好地工作。

orphans

此属性有助于控制文本中换行符的显示方式。它接受一个数值，该数值指示如果整个容器不适合页面或列，则应在页面底部保留的块容器（例如段落）的最小行数。

不幸的是，它在 Firefox 中当前不受支持。

order

order 属性指定弹性容器内的项目。该值是一个数字，也可以为负数，或者“inherit”、“initial”、“unset”。

<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item:nth-child(1) { order: 3 }
.item:nth-child(2) { order: 1 }
.item:nth-child(3) { order: 2 }

此代码将以 2、3、1 的顺序显示项目。

overflow-wrap

此属性指定如果长单词作为一个单词不适合容器，是否应在长单词中发生换行。

normal: 在正常的断点处换行
break-word: 如果没有空格，则换行通常不可换行的单词

它还接受所有正常的全局值：inherit、initial、unset。

page-break-*

有三个 CSS 属性允许您调整分页符

page-break-before: 控制元素之前的分页符
page-break-after: 控制元素之后的分页符
page-break-inside: 控制元素内部的分页符

这些在尝试控制页面打印方式时很有用。这些是它们可能的值

auto: 自动分页
always: 始终在元素之前或之后插入分页符（即使有大量空间）
avoid: 尽可能避免在元素之前/之后/内部分页符
left: 插入分页符，以便下一页格式化为左页
right: 插入分页符，以便下一页格式化为右页
recto: 如果页面从左到右，则充当 right，如果从右到左，则充当 left
verso: 如果页面从左到右，则充当 left，如果从右到左，则充当 right

有一些事情您应该知道

1. recto 和 verso 值仍在实验阶段
2. page-break-* 属性将在不久的将来被更通用的 break-* 属性替换
3. 大多数浏览器仅支持 page-break-inside（不支持 page-break-before 或 page-break-after）
4. 除 Opera Mini、IE 和 Edge 之外的所有浏览器都将“left”和“right”值视为“always”，
   因此最好先检查您是否可以使用它。

percentage

百分比值就像 width: 10%。在该示例中，应用它的元素将是父元素宽度的 10%。但是还有其他属性也基于父元素的宽度。例如，填充。如果我们有一个宽度为 400px、高度为 300px 的容器，并且具有 padding-top: 10% 和 padding-left: 10%，则两者的填充都将为 40px（而不是 40px 和 30px）！

perspective

perspective CSS 属性在 3D 中为元素提供透视（仅与 3D 变换元素相关）。其值是从视口到元素 z 平面的距离。该值是长度，可以用 px 或 em 表示，也可以是“none”关键字。

该属性必须应用于父元素（容器）或您希望应用透视的元素。

查看 Greg Hovanesyan 的 CodePen 示例 perspective（@gregh）在 CodePen 上。

pointer-events

此属性指定元素如何对鼠标事件做出反应。

auto: 元素正常运行
none: 忽略所有点击、选择、拖动等。

它还具有一些对 SVG 元素唯一的特殊值

visiblePainted: 元素的填充和描边部分是目标。visibility 必须设置为 visible，stroke 值必须不为 none。
visibleFill: 仅元素的填充部分是目标。visibility 必须设置为 visible。
visibleStroke: 仅元素的描边部分是目标。stroke 值必须不为 none。
visible: 当元素的 visibility 设置为 visible 时，元素的填充和描边部分是目标。
painted: 元素的填充和描边部分是目标。元素的 visibility 不影响事件处理。
fill: 仅元素的填充部分是目标。元素的 visibility 不影响事件处理。
stroke: 仅元素的描边部分是目标。元素的 visibility 不影响事件处理。
all: 整个元素都是目标。元素的 fill、stroke 和 visibility 属性不影响事件处理。

position

您可能熟悉诸如 static、relative、absolute 和 fixed 之类的 position 值。还有一个有趣的值sticky。

具有 position: sticky 的元素被视为 relative，直到它们到达某个点，然后它们变为 fixed。想想：iPhone 联系人列表字母书签或滚动然后修复导航。这通常是我们必须使用 JavaScript 完成的事情，但现在可以在纯 CSS 中完成。

查看 Greg Hovanesyan 在 CodePen 上的笔 position: sticky（@gregh）。

resize

resize 属性定义元素是否可以被用户调整大小。您可以使元素垂直、水平或同时调整大小。

none: 元素不可调整大小。这是大多数元素的默认值，除了 textarea，其默认值为“both”。
both: 可同时调整水平和垂直方向的大小。
horizontal: 可水平调整大小。
vertical: 可垂直调整大小。

重要：为了使元素可调整大小，其 overflow 必须设置为除 visible 之外的其他值。

shape-outside

shape-outside 属性允许我们在浮动元素周围的形状中包裹文本。也许它是一个圆形图像，并且您希望文本围绕该圆形环绕。该属性将应用于您希望在其周围环绕内容的元素。它接受以下值

关键字值：none、margin-box、padding-box、border-box、padding-box
函数值：circle()、ellipse()、inset()、polygon()

您还可以将 URL 传递到内容将围绕其环绕的图像，并且它接受全局初始、继承和未设置的值。

如果您选择使用图像，则 shape-image-threshold 属性将定义 alpha 通道阈值以将形状与图像分离。Firefox 和 IE 仍然不支持此属性，而 Safari 使用 -webkit- 前缀支持它。

有关所有这些的更多信息，请参阅 年鉴。

查看 Greg Hovanesyan 在 CodePen 上的笔 shape-outside（@gregh）。

@supports

此 CSS at-rule 使您能够在使用某些属性（或属性/值组合）之前检查浏览器是否支持它们。

@supports (display: grid) {
  .container {
    display: grid;
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

您可以像这样使用多个属性

@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {

}

var()

var() 属性是使用 CSS 自定义属性的一部分。

CSS 变量由作者定义，表示可以在文档中多次使用的特定值。var() 函数可以用作任何属性的值，但不能用作属性或选择器。函数的第一个值是自定义属性的名称；第二个是可选的回退值，如果第一个参数无效，则使用它。

让我们看看语法

:root {
  --primary-color: #cccccc;
}
body {
  color: var(--primary-color);
}

带回退值

body {
  color: var(--primary-color, #cccccc);
}

在 Sass 中，这就像

$primary-color: #ccc;

body {
  color: $primary-color;
}

但请注意，自定义属性和预处理器变量并不完全相同。

不幸的是，自定义属性在 IE11、Edge 14 和 Opera mini 中不受支持。Edge 15 将提供部分支持。

table-layout

曾经需要使表格中的所有单元格都强制为相同的宽度吗？

table {
  table-layout: fixed;
}

查看 Greg Hovanesyan 在 CodePen 上的笔 table-layout: fixed（@gregh）。

有关所有这些的更多信息，请参阅 此处。

text-transform

text-transform 属性 可以将文本的大小写更改为 lowercase 或 uppercase。您还可以使用 capitalize 将每个单词的首字母大写。

需要考虑的一件事是：在 HTML 中直接使用全大写类型还是使用正常大小写类型并在 CSS 中使用 text-transform: uppercase 来更改它更正确？最好使用 CSS。例如，联系我们与联系我们。屏幕阅读器可能会将 HTML 中的大写字母读作“联系我们”，而不是“联系我们”。

transition-timing-function

transition-timing-function 属性指定过渡效果的速度曲线，如 ease-in 或 ease-out。以下有两个鲜为人知的已知值

steps(n, start|end): 而不是使用 ease 等计时函数指定平滑过渡，这会以您定义的步骤数完成动画。第二个参数是可选的，并指定在间隔内的哪个点发生更改。第二个参数的默认值为 end。您还可以使用速记函数 step-start(n) 和 step-end(n)。
cubic-bezier(n, n, n, n): 您自己的三次贝塞尔函数。

查看 Greg Hovanesyan 在 CodePen 上的笔 transition-timing-function（@gregh）。

使用此 工具 创建三次贝塞尔计时函数。
您还可以使用 Chrome 开发者工具修改贝塞尔曲线。

vh、vw、vmin、vmax

这些值用于相对于视口大小调整大小。虽然 width 始终相对于父容器，但 vh 或 vw 始终使用视口大小作为基础。

vh: 1vh 等于视口高度的 1/100。
vw: 1vw 等于视口宽度的 1/100。
vmin: 它是 vh 和 vw 的最小值。
vmax: 是这两个值中的最大值。

对于视口为 1280x655px 的浏览器窗口，1vh 等于 6.55 像素，1vw 等于 12.8 像素，vmin 为 6.55 像素（这两个值中最小的），vmax 为 12.8 像素（这两个值中最大的）。

white-space

此属性定义如何处理元素内的空白。

normal: 合并新行，合并空格和制表符，文本换行。
nowrap: 合并新行，合并空格和制表符，文本不换行。
pre: 保留新行，保留空格和制表符，文本不换行。
pre-wrap: 保留新行，保留空格和制表符，文本换行。
pre-line: 保留新行，合并空格和制表符，文本换行。

查看 Greg Hovanesyan 在 CodePen 上的笔 dNPZpX（@gregh）。

word-break

此属性指定换行规则。

normal: 使用标准规则换行。
break-all: 行可以在任何两个字母之间断开。
keep-all: 禁止在字母之间断开。

查看 Greg Hovanesyan 在 CodePen 上的笔 word-break（@gregh）。

word-spacing

类似于letter-spacing，但它是针对单词的！你可以增加（或减少）单词之间的间距。此属性的标准值为normal，它使用默认的空白：0.25em。

will-change

will-change 属性允许作者告诉浏览器预期元素会发生哪些变化。变化是指属性值的更改，很可能作为动画的一部分。其目的是让浏览器提前了解你打算执行的动画，因为浏览器无法始终预测这一点。当你提供提示时，它可以优化性能。

normal: 执行标准优化
scroll-position: 为浏览器准备好滚动位置更改
content: 元素的内容将更改

你还可以设置将要更改的特定属性，如下所示

.will-be-animated {
  will-change: top, left;
}

在引入此属性之前，我们习惯使用这样的技巧来欺骗浏览器以更好的性能来动画化某些元素（通过“强制”元素“进入 GPU”）

.will-be-animated {
  transform: translate3d(0, 0, 0);
}

这篇文章深入探讨了这个主题。

writing-mode

writing-mode 属性定义文本是水平排列还是垂直排列，以及方向。

horizontal-tb: 内容从左到右流动，从上到下
vertical-rl: 内容从上到下流动，从右到左
vertical-lr: 内容从上到下流动，从左到右

查看 Greg Hovanesyan 在 CodePen 上创建的示例 writing-mode (@gregh)。

:-webkit-autofill

此 CSS 伪类匹配浏览器自动填充的输入元素。这让你有机会更改该样式。例如，在 Chrome 中，它们默认具有黄色背景。

-webkit-overflow-scrolling

此属性允许我们在触摸设备上的元素上使用 iOS 惯性滚动。有两个值

auto: 使用普通滚动，当你从屏幕上移开手指时滚动会立即停止
touch: 使用惯性滚动

-webkit-touch-callout

此属性允许我们隐藏 iOS 设备上的默认弹出菜单。当你触摸并按住目标时，会显示一个包含信息控件的菜单。

none: 禁用弹出菜单
default: 显示弹出菜单

-webkit-scrollbar

有一种方法可以隐藏元素上的滚动条

#container::-webkit-scrollbar {
  display: none;
}

还有一种方法可以在 IE10+ 和 Edge 上自动隐藏滚动条。

html {
  -ms-overflow-style: ms-autohiding-scrollbar;
}

Animatable

这是可以设置动画的 CSS 属性的完整列表。 我们最常将过渡应用于不透明度、背景颜色等，但了解我们可以对其他内容（例如letter-spacing）设置动画也很有帮助。

查看 Greg Hovanesyan 在 CodePen 上创建的示例 animating letter-spacing (@gregh)。