进入我的博客

▼

这里有您在其他地方看不到的web前端方面的技术、知识及资源

▼

这里有您在其他地方看不到的web前端方面的技术、知识及资源

张鑫旭-鑫空间-鑫生活

 it's my whole life!

备份内容浏览

« 查看全部推荐内容

【翻译】50+个有趣的css属性

前言

本文内容主要翻译自Let’s Look at 50+ Interesting CSS Properties & Values，相比原文略有增删修改。

当我们面对一些需求的时候可能会问自己能不能只使用 css 完成它，而不用 javascript。最新的 css 属性跟功能能够简单快速的解决很多老问题。

本文总结了 50 多个很有趣的的 css 属性和值，我会简单的介绍他们的用法并提供示例。其中有一些属性目前是试验属性，相信随着浏览器和css标准的发展以后会很快被普遍支持。我还会介绍一些常用属性的鲜为人知的值，可能可以帮助你加深对这些属性的印象。同时文中还会提及一些浏览器特性。

目录

all

all属性可以重置把元素的其他所有属性重置为默认属性。它包括以下3个值：

  • initial: 修改所有元素属性或父元素的值为其初始化值
  • inherit: 修改所有元素属性或父元素的值为其父元素的值
  • unset: 修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

angle

angle 的中文意为角度。我们在旋转元素时经常使用角度，如transform: rotate(180deg)，但是“deg”不是唯一的角度单位。同时还有grad、rad、turn可以使用。例如transform: rotate(180deg)等同于transform: rotate(0.5turn)。所以如果你想让元素旋转4圈，写成rotate(4turn)更容易理解。

animation-fill-mode

这个属性可以指定当元素的动画不播放时应用的样式。想象一下我们使用@keyframe动画定义一个变淡的退出动画(from opacity: 1; to opacity: 0;)，当动画完成，元素会突然跳回初始状态。

但如果使用animation-fill-mode: forwards;，元素就会保持在动画结束时的opacity: 0的状态。

该属性包含以下几个值：

  • none: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
  • forwards: 动画将应用动画结束时的值。这个结束并不一定是动画的一个周期100%结束，而是根据animation-iteration-count属性决定，例如animation-iteration-count:1.5时，动画将会播放到第二遍的 50% 处停止。此时元素就会保持此时停止时的状态。
  • backwards:将会应用动画开始时的值。
  • both: 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
  • initial: 设置该属性为它的默认值。
  • inherit: 从父元素继承该属性。

animation-iteration-count

这个属性定义动画的重复次数，值可以是具体的次数或者infinite（无限次，不停重复），它的值可以是个非整数，例如animation-iteration-count: 1.5，动画将会播放一圈半。

backface-visibility

这是个跟 3D transforms 相关的属性，用来定义当元素不面向屏幕时是否可见，它有以下值：

  • visible: 默认值，当旋转到背面时元素可见。
  • hidden: 当旋转到背面时元素不可见。
  • initial: 设置该属性为它的默认值。
  • inherit: 从父元素继承该属性。

background-attachment

这个属性设置背景图像是否固定或者随着页面滚动，有以下值：

  • Scroll: 默认值，背景图像相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
  • fixed: 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
  • Local: 背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

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
  • saturation
  • screen
  • soft-light

background-clip

该属性定义元素的背景（背景图片或颜色）是否延伸到边框下面。你可以设置背景延伸到边框下面，或者只待在内容区域下面。

  • border-box: 默认值，背景延伸到边框外沿（但是在边框之下）。
  • content-box: 背景裁剪到内容区 (content-box) 外沿。
  • padding-box: 边框下面没有背景，即背景延伸到内边距外沿。
  • text: 把背景按上面的文字形状裁剪。

background-origin

这个属性定义背景图片的原始位置，定义背景图片从边框（border）、内边距（pandding）、内容区域（content）开始。它与background-clip的区别是background-clip是把背景裁剪至只在指定区域显示，而background-origin是移动背景图片至只在指定区域显示。

box-decoration-break

这个属性定义属性是用来控制行内元素有关于 background、padding、border、border-image、box-shadow 和 clip 属性在行内元素多行情形下的渲染形式。该属性接受以下两个值：

  • clone: 元素的每个片段都接受样式，box shadows 和 padding 等样式会单独的应用到每个片段上。
  • slice: 默认值，样式会被应用到整体元素。

注意：box-decoration-break只能应用在行内元素上，MDN上介绍只用 Firefox 和 Chrome 支持它，但我测试后发现Firefox，Chrome 54， Opera 41 和 Safari 10 都可以使用。当然不要忘记使用前缀-webkit-。

calc()

calc()可以输出计算值，例如width: calc(100% - 32px)可以让元素离100%宽度差30像素，这在设置元素宽度和外边距时是十分有用的，如果有多个一排显示的元素，我们希望每个元素有百分比的宽度和固定的外边距（margin），以往的做法是给每个元素添加个父元素，并并给父元素设置固定值的内边距（padding），使用 calc() 的话就不需这么麻烦。
calc()可以计算加减乘除，运算对象可以是任何长度的值，你甚至可以使用calc(var(--someValue) / 2 - 2em)这种方式。
你可以使用以下降级方式处理浏览器的兼容问题：

JavaScript
1
2
3
4
 
width: 98%; /* 不支持 calc() 的浏览器会使用此行 */    
width: calc(100% - 1em);
 

column-count

该属性指定某个元素应分为的列数。例如column-count: 3将会把元素内的文字（或行内元素）分为3列，你也可以把它应用到inline-block或block元素上，该属性对display: table的元素不起作用，但对 diaplay 值为table-cell的元素起作用。
这里有一系列的 column-* 形式的 css 属性：

  • column-gap: 定义每列之间的间距。
  • column-rule: 定义每列之间的垂直的线的宽度、样式、颜色（跟 border-* 非常像）。
  • column-rule-color: 定义线的颜色，可以使用颜色名（red, green, transparent）, hex, 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。

content

这个属性使用在::before和::after这样的伪元素中，例如我们可以这样给<ul>的每个元素都加上逗号：

JavaScript
1
2
3
4
5
 
ul &gt; li:not(:last-child):after {
  content: &quot;, &quot;;
}
 

counters

使用 css counters 我们可以简便的给元素添加计数，例如你有一片文章，含多个主题，每个主题都有一个<h2>作为标题，同时有<h3>作为副标题。使用 css counters 你可以让他们自动编号。
counters 有以下个相关属性：

  • counter-reset: 重置或新建一个计数，该属性的值是你自定义的计数名。
  • counter-increment: 让计数的数值增加，这个属性的值是你想要让数值增加的计数的名字。
  • content: 使用 :before 以伪元素的方式给元素前添加计数数字，计数的值通过counter()获取。

currentColor

currentColor 关键字代表元素的当前颜色。

JavaScript
1
2
3
4
5
6
7
8
9
 
.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}
 

另外一个很有用的小技巧是通过此属性让 svg 图标的颜色也跟随父元素：

JavaScript
1
2
3
4
5
6
7
8
 
button {
  color: red;
}
button svg {
  fill: currentColor;
}
 

filter

该属性能够给元素添加一些滤镜视觉效果。包括一些预置的效果例如 blur（虚化）, brightness（亮度）, contrast（对比度）, sepia（灰度），你也可以使用自定义的 SVG 滤镜。

你也可以同时使用多种滤镜产生混合效果，这里有一些使用 filter 模仿 Instagran 滤镜例子。

这里有个小技巧：你可以通过滤镜把一个颜色变成另外一种完全不同的颜色。你可以通过改变色调（Hue）、饱和度（Saturation）、亮度（Lightness）来做到这一点，为了做到这点，首先需要把 RGB 色值转换成 HSL 色值，然后减去 H, S, L 的值，我制作了一个简单的计算器，它可以生成能够把原颜色转换成目标颜色的 filter 的值：

flex

flex属性是弹性布局（flexbox layout）的简写属性。最常使用的是flex: 1;，这样可以让同一行的元素平分空间至所有元素占满空间。flex 属性的默认值是 0 1 auto。

flex-flow

flex-flow 属性是flex-direction和flex-wrap的简写属性。它接受flex-direction的值（row, row-reverse, column, column-reverse），和flex-wrap的值（nowrap, wrap, wrap-reverse），例如你可以使用nowrap, wrap, wrap-reverse。

flex-basis

该属性定义一个 flex 元素的初始大小（在一个横向的 flexbox layout 中有点像 width）。它接受宽度的单位如 px、em等等。也接受一些固定值例如：fill, max-content, min-content和fit-content，这些固定值目前是试验属性，兼容很差。

font-kerning

该属性定义字距，对于没有包含字距数据的字体，此属性没有可见的效果。如果定义了‘letter-spacing’属性，则字距调整被认为是默认间距的一部分，字母间距调整则会在应用了字距调整之后再进行。它接受以下值：

  • auto: 由浏览器决定是否使用字距。
  • normal: 使用字距。
  • none: 阻止浏览器使用字距。

font-smoothing

这个属性定义文本的平滑属性，可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。不过使用了这个属性克可能会使你的页面字体跟设计稿上看起来有些不一样。它在 Webkit 与 Firefox 中使用略有不同：

-webkit-font-smoothing:

  • none: 关闭抗平滑处理。
  • antialiased: 使用平滑处理，使字体的清晰度提高一个像素的级别。
  • subpixel-antialiased: 亚像素级别的平滑处理，在非视网膜（retina）屏幕上有更好的效果。

-moz-osx-font-smoothing:

  • auto: 让浏览器自动选择处理方式。
  • none: 使用灰阶平滑，这个的渲染结果跟在 webkit 里使用“antialiased”类似。

font-variant

font-variant:small-caps 可以让文本显示成小体大写字母，这个跟::first-line选择器一起使用会有很好的效果。

grid

网格布局（Grid layout ）让我们创建二维网格布局时不会再碰到以往通过表格（table）和浮动（float）来实现类似布局时产生的各种问题，相信很快 Grid layout 就会得到普遍的支持。
一个网格布局包含容器及元素，你可以定义每行每列间如何分配空间。它们的值代表每列的大小，并且你也可以分别给它们命名。

JavaScript
1
2
3
4
5
6
7
 
.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
 

现在 “grid-template-columns” 的第一列和第五列的宽度为 40px，第二列和第四列的宽度为 50px，中间的一列则占据剩余空间。我们再来看看如何给字元素设定位置。我们必须给子元素设定开始及结束的位置。如下所示：

JavaScript
1
2
3
4
5
6
7
8
 
.item {
  grid-column-start: 2; // 将会从第二列开始
  grid-column-end: 5;   // 将会在第五列结束
  grid-row-start: 1;    // 将会从第一行开始
  grid-row-end: 3;      // 将会在第三行结束
}
 

hyphens

这个属性定义浏览器如何处理英文间的连字符。

  • none: 不使用连字符，文字将会被。
  • auto: 浏览器自动的判断使用连字符。
  • manual: 手动定义连字符位置。

如果使用manual手动定义连字符位置的话，还需要使用断字符号：

  • &shy;: 当宽度不够容纳整个词时，在此处使用连字符换行。
  • &hyphen;: 即使不需换行，也在此处使用连字符。

image-rendering

该属性定义图片被缩放时应该怎样渲染。举个例子，如果一个尺寸为100×100px的图片，但作者有意把尺寸设置为200×200px (或50×50px), 然后图片会根据指定的算法缩小或放大到新尺寸。

  • auto: 浏览器自动的应用调整。
  • crisp-edges: 图像缩放时,该算法保留图像的对比度和边缘.在不平滑过渡的颜色中引入模糊图像. 这常用于像素级作品。
  • pixelated: 当图片被放大时才有效，它会让图片像素化。

list-style-image

该属性用来指定一个能用来作为列表元素标记的图片。我们经常使用对<ul>使用list-style-type: none;然后再给<li>应用背景。直接对<ul>使用list-style-image来给列表添加标记图片也是很好的方式。

JavaScript
1
2
3
4
5
 
ul {
  list-style-image: url('square.gif');
}
 

list-style-position

该属性定义列表标记符的位置。

  • inside: 标记符在内容盒的里面。
  • outside: 标记符在内容盒的外面。

object-fit

该属性定义替换内容（如图片<img>）元素如何适应到其使用的高度和宽确定的框。一般来说，图片会被压缩或者拉伸以适应外框的面积，通过该属性可以选择其他的方式来控制图片的缩放。

  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
  • inside: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

如果没有object-fit，我们想给图片实现contain效果的话，就得给图片添加个父元素，并使用绝对定位等属性来得到相似的结果：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
.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，事情就变的简单多了：

JavaScript
1
2
3
4
5
6
7
 
img {
  width: 400px;
  height: 300px;
  object-fit: contain;
}
 

此属性深入理解请前往张鑫旭大神这篇半深入理解CSS3 object-position/object-fit属性

orphans

这个属性帮助你控制文字的换行。它接受一个数字值，来指定当元素内部发生分页时必须在页面底部保留的最少行数。
不过目前 Firefox 还不支持这个属性。

order

该属性应用在弹性布局（flex container）中。它的值是数字，用来表明弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。

JavaScript
1
2
3
4
5
6
7
 
&lt;div class=&quot;flex-container&quot;&gt;
  &lt;div class=&quot;item&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;item&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;item&quot;&gt;3&lt;/div&gt;
&lt;/div&gt;
 

JavaScript
1
2
3
4
5
 
.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-*

有 3 个 CSS 属性让你能够插入分页（page-breaking）。

  • page-break-before: 控制元素前的分页行为。
  • page-break-after: 控制元素后的分页行为。
  • page-break-insid: 控制元素内的分页行为。

当你想控制页面的打印的时候，这些属性是很有用的，他们接受以下值：

  • auto: 自动处理分页。
  • always: 插入分页符。
  • avoid: 避免插入分页符。
  • left: 插入足够的分页符，一直到一张空白的左页为止。
  • right: 插入足够的分页符，一直到一张空白的右页为止。
  • recto: 若页面是从左至右，则向右插入分页符；若页面是从右向左，则向左插入分页符。
  • verso: 若页面是从左至右，则向左插入分页符；若页面是从右向左，则向右插入分页符。

有几个注意事项：

  1. recto和recto目前还是试验属性。
  2. page-break- 未来将会被 break- 取代。
  3. 大多数浏览器只支持page-break-inside。
  4. 除了 Opera Mini, IE 和 Edge 以外，其他浏览器上 “left” 和 “right” 表现的跟 “always” 一样。

percentage

中文意为百分比，百分比的值就是类似width: 10%这种，在这个例子里元素的宽度会是它父元素宽度的 10%。还有一些其他属性的百分比计算也是基于父元素。例如 padding，如果我们有个宽 400px，高 300px 的 container，然后给它设padding-top: 10%以及padding-left: 10%，这时它的上下跟左右内边距都是 40px（而不是 40px 与 30px）！

perspective

中文意为透视，该属性给元素一个3D的透视点，让元素能够表现出远近的状态，只对 三维变换（3D transformed）元素起效。它的值是视口（观察者）距元素的 Z 轴的距离，这个值是长度，单位可以是 px 或 em 或关键字“none”。

这个属性必须有一个父元素或者你希望被应用透视的元素。

pointer-events

这个属性定义元素在鼠标事件时的反应。
– auto: 元素行为正常表现。
– none: 忽略所有的点击、选择、拖动等。

它还有一些特殊的值专门应用于 SVG 元素：

  • visiblePainted: 元素被填充（filled）和被描线（storked）的部分成为鼠标事件的目标。同时visibility的值必须是visible并且storke的值不能是none。
  • visibleFill: 只有被填充（filled）的部分成为鼠标事件的目标。同时visibility的值必须是visible。
  • visibleStroke: 只有被描线（storked）的部分成为鼠标事件的目标。同时storke的值不能是none。
  • visible: 当visibility的值是visible时，元素被填充（filled）和被描线（storked）的部分成为鼠标事件的目标。
  • painted: 元素被填充（filled）和被描线（storked）的部分成为鼠标事件的目标。visibility的值不影响事件效果。
  • fill: 只有被填充（filled）的部分成为鼠标事件的目标。visibility的值不影响事件效果。
  • stroke: 只有被描线（storked）的部分成为鼠标事件的目标。visibility的值不影响事件效果。
  • all: 整个元素都成为鼠标事件的目标。fill, storke, visibility的值不影响事件效果。

position

大家应该都很熟悉 position 的这几个值：static, relative, absolute 和 fixed。其实它还有个有意思的值：sticky。

position: sticky在显示上跟relative一样，但当元素运动到某个设定的位置时，它就会表现的跟fixed一样。开发移动端的朋友应该了解在页面滚动时fixed的元素会因 iphone 特有的弹性效果表现的不如人意。这个属性用在 iphone 上代替 fixed 会有很好的效果。

resize

该属性控制元素是否能被用户缩放，你可以设置是否允许水平、垂直、或等比例的缩放元素。

  • none: 元素不能被用户缩放。这是大多数元素该属性的默认值，只有 textarea 元素的该属性默认值是both。
  • both: 允许用户在水平和垂直方向上调整元素的大小。
  • horizontal: 允许用户在水平方向上调整元素的大小。
  • vertical: 允许用户在垂直方向上调整元素的大小。

注意：为了让元素时可缩放的，它的overflow属性是visible以外的其他值。

shape-outside

该属性可以让我们把文字以某种形状环绕浮动在元素周围。例如可以让文字围成一个圆，该属性应用在你想要被围绕的元素上面。它接受以下值：

  • 关键字值: none, margin-box, padding-box, border-box, padding-box。
  • 函数值: circle(), ellipse(), inset(), polygon()

你也可以通过URL指定一张图片创建形状shape-outside: url(img/bg.png);，同时可以使用shape-image-threshold属性指定等于或大于某一透明度的像素可以用于创建形状。取值范围：0.0 – 1.0。Firefox 和 IE 目前还不支持shape-image-threshold

shape-outside 的更多内容建议参阅这篇文章：css shape-outside 总结

@supports

这个 CSS 语句该语句可以用来做特性查询，检测当前浏览器是否支持某些属性。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 
@supports (display: grid) {
  .container {
    display: grid;
  }
}            
 
@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}
 

你也可以同时检测多种属性：

JavaScript
1
2
3
4
5
 
@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {
 
}
 

var()

该功能让我们可以像 Less、Sass 一样定义变量。我们通过--* 的方式来创建一个CSS变量，并通过var(--foo) 的方式来引用一个变量（大小写敏感哦）。例如：

JavaScript
1
2
3
4
5
6
7
8
9
 
:root {
    --brand-primary: #cccccc;
}
 
body {
    background-color: var(--brand-primary);
}
 

var() 还可以接受第二个参数，表示备选参数，第一个参数获取失败的时候，它就生效了。

JavaScript
1
2
3
4
5
 
body {
  color: var(--primary-color, #cccccc);
}
 

目前 IE11、Edge14 和 Opera mini 都还不支持该属性，Edge15 将会提供支持。

table-layout

该属性属性定义了表格布局算法，用于对表格中单元格、行和列进行布局。如果你需要让表格内的所有格的宽度都一样，那这个属性对你很有用。

JavaScript
1
2
3
4
5
 
table {
  table-layout: fixed;
}
 

该属性更详细的内容请参阅Fixed Table Layouts

text-transform

该属性可以让文本变成小写（lowercase）或大写（uppercase），你也可以通过capitalize来单独对每一个单词进行操作。

transition-timing-function

该属性定义缓动元素的过渡曲线，例如ease-in或ease-out，不过它有两个值可能很少人了解：

  • steps(n, start|end): 关键字ease这种能实现平滑过渡动画，而stepes可以实现分步过渡，第一个参数必须是正整数，定义动画在第几步（帧）完成；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。该值可以简写为step-start(n)和step-end(n)
  • cubic-bezier(n, n, n, n): 定义你自己的贝塞尔过渡曲线。

vh, vw, vmin, vmax

这些单位被用来计算视口大小（viewport size）。

  • vh: 1vh 是 1/100 的视口高度。
  • vw: 1vw 是 1/100 的视口宽度
  • vmin: vh 和 vw 的最小值。
  • vmax: vh 和 vw 的最大值。

例如浏览器的视口大小为 1280*655px，1vh 就等于 6.55px，1vw 等于 12.8px，vmin 是 6.55px(两者间的最小值)，vmax 是 12.8px（两者间的最大值）。

white-space

该属性是用来设置如何处理元素中的空白。

  • normal: 连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
  • nowrap: 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
  • pre: 连续的空白符会被保留。在遇到换行符或者
    元素时才会换行。
  • pre-wrap: 连续的空白符会被保留。在遇到换行符或者
    元素，或者需要为了填充line盒子时才会换行。
  • pre-line: 连续的空白符会被合并。在遇到换行符或者
    元素，或者需要为了填充line盒子时会换行。

word-break

该属性指定怎样在单词内断行

  • normal: 使用默认的断行规则。
  • break-all: 对于non-CJK (中文/日文/韩文) 文本，可在任意字符间断行。
  • keep-all: CJK 文本不断行。 Non-CJK 文本表现同 normal。

word-spacing

跟letter-spacing差不多，不过这个是处理词间距，你可以用这个值增加（或减少）两个单词之间的距离。它的默认值是normal，一般为 0.25em。

will-change

这个属性是告诉浏览器该元素要变化了，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

  • normal: 浏览器执行默认优化。
  • scroll-position: 表示开发者希望在不久后改变滚动条的位置或者使之产生动画。
  • content: 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

也可以指定明确的属性表示要变化的内容：

JavaScript
1
2
3
4
5
 
.will-be-animated {
  will-change: top, left;
}
 

在这个属性出现之前，我们通常使用下面的小技巧提高元素的动画性能（这样可以让元素动画通过 GPU 计算） ：

JavaScript
1
2
3
4
5
 
.will-be-animated {
  transform: translate3d(0, 0, 0);
}
 

深入了解该属性请参考 MDN will-change 词条

writing-mode

该属性控制文本是横向显示还是竖向显示。

  • horizontal-tb: 内容横向、从上至下显示。
  • vertical-rl: 内容竖向、从右至左显示。
  • vertical-lr: 内容竖向、从左至右显示。

:-webkit-autofill

该选择器会选择被浏览器自动填充的 input 元素（比如自动填充了账号密码等）。它给了你一个机会让你能改变这些被自动填充的 input 的样式。在 Chrome 里这些 input 默认是黄色背景。

-webkit-overflow-scrolling

该属性让我们能在 IOS 设备上实现元素内部的弹性滚动。它有两个值：

  • auto: 使用普通滚动，在 IOS 里会有中齿轮感。
  • normal: 使用弹性滚动。

-webkit-touch-callout

该属性能隐藏 IOS 设备上默认出现的呼出。例如当你按住某个目标时出现的浮动控制菜单。

  • none: 不显示呼出。
  • default: 显示呼出。

-webkit-scrollbar

隐藏元素的滚动条。

JavaScript
1
2
3
4
5
 
#container::-webkit-scrollbar {
  display: none;
}
 

在 IE10 和 Edga 中使用以下方法：

JavaScript
1
2
3
4
5
 
html {
  -ms-overflow-style: ms-autohiding-scrollbar;
}
 

Animatable

这里有个 CSS 中所有可以被动画的属性的列表。我们常常给透明度（opacity）、背景颜色（background-color）等等属性添加动画。其实也可以其他一些属性添加动画，例如 letter-spacing。

PS: 备份内容仅显示纯文字。

抱歉，服务器忙，未能成功提交，稍后重试。