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

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

目录

all

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

initial: 修改所有元素属性或父元素的值为其初始化值

inherit: 修改所有元素属性或父元素的值为其父元素的值

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

font-smoothing

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

-webkit-font-smoothing:

none: 关闭抗平滑处理。

antialiased: 使用平滑处理，使字体的清晰度提高一个像素的级别。

subpixel-antialiased: 亚像素级别的平滑处理，在非视网膜(retina)屏幕上有更好的效果。

-moz-osx-font-smoothing:

auto: 让浏览器自动选择处理方式。

none: 使用灰阶平滑，这个的渲染结果跟在 webkit 里使用“antialiased”类似。

list-style-position

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

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

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

object-fit

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

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容(如图片)部分区域不可见。

inside: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

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

@supports

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

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;

}

}

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

1

2

3

4

5

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

}

var()

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

1

2

3

4

5

6

7

8

9

:root {

--brand-primary: #cccccc;

}

body {

background-color: var(--brand-primary);

}

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

1

2

3

4

5

body {

color: var(--primary-color, #cccccc);

}

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

table-layout

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

1

2

3

4

5

table {

table-layout: fixed;

}

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: 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

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

1

2

3

4

5

.will-be-animated {

will-change: top, left;

}

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

1

2

3

4

5

.will-be-animated {

transform: translate3d(0, 0, 0);

}

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

隐藏元素的滚动条。

1

2

3

4

5

#container::-webkit-scrollbar {

display: none;

}

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

1

2

3

4

5

html {

-ms-overflow-style: ms-autohiding-scrollbar;

}

Animatable

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

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

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