index

css属性 __佩奇

1. (all)

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

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

2.(angle)

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

3.(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: 从父元素继承该属性。

4.(animation-iteration-count)

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

5.(backface-visibility)

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

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

6.(background-attachment)

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

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

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

8.(background-clip)

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

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

9.(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-。

1

calc()

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

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

10.(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。

1

content

这个属性使用在::before和::after这样的伪元素中，例如我们可以这样给

1 2 3 4 5

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

counters

使用 css counters 我们可以简便的给元素添加计数，例如你有一片文章，含多个主题，每个主题都有一个

作为标题，同时有

作为副标题。使用 css counters 你可以让他们自动编号。 counters 有以下个相关属性：

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

http://www.ferecord.com/lets-look-50-interesting-css-properties-values.html