css扩展知识4

1.font-smoothing

font-smoothing：none，无抗锯齿。

font-smoothing：subpixel-antialiased，默认值，效果一般。

font-smoothing：antialiased，抗锯齿，字体清晰。

2.vertical-align: middle;垂直居中

3.webkit-linear-gradient:渐变的使用，方向，初始颜色......最后颜色

4.用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪。

注：要和-webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色，一起使用。

5.-webkit-animation: hue 60s infinite linear;这里定义了一个名为hue的动画名，第二个参数设置动画持续时间为60s，第三个指定动画播放次数无限次，第四个设置速度变化（从头到尾速度相同）。

6.filter: hue-rotate(-360deg);色调旋转（只需要写一个，就会生成其他各种颜色。

优点：①巨省代码，开发巨快。②色值更精准。

hue-rotate滤镜除了支持deg，还支持其它CSS3单位，如圈数turn以及弧度rad等。

7.cursor

cursor:pointer； 手型鼠标

cursor：default； 箭头

cursor：crosshair ；十字

cursor：progress； 沙漏

8.使用CSS reset

像normalize.css这样的CSS重置库非常受欢迎，它为您的站点样式提供了一个清爽的选择，能确保浏览器之间更好的一致性。而实际上并不是每个项目都需要这些库中包含的所有规则，我们可以通过一些

简单的css规则就能规避浏览器之间的差异。请看下面的盒模型代码：

* {
box-sizing: border-box;

margin: 0;

padding: 0;

}

9.继承 box-sizing

让 box-sizing 继承 html

html {
box-sizing: border-box;

}

*, *:before, *:after {
box-sizing: inherit;

}

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

使用Flexbox摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack

.list {
display: flex;

justify-content: space-between;

}

.list .person {
flex-basis: 23%;

}

10.使用 :not() 定义菜单边框

我们要定义菜单列表的边框，然后去掉最后一个菜单的边框，通常做法是：

.nav li {
border-right: 1px solid #666;

}

.nav li:last-child {
border-right: none;

}

而我们现在可以直接使用 :not() 伪类来应用元素，让代码就干净、易读、易于理解。

.nav li:not(:last-child) {
border-right: 1px solid #666;

}

11.垂直居中

要将所有元素垂直居中，使用以下代码：

html, body {
height: 100%;

margin: 0;

}

body {
-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

12.使用SVG作为图标

SVG可以适应不同的分辨率，并且在所有的浏览器中都支持。

.logo {
background: url("logo.svg");

}

13.等宽的表格单元格

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽。

.calendar {
table-layout: fixed;

}

14.使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接。

a[href^="http"]:empty::before {
content: attr(href);

}