CSS 高级技巧

1.黑白图像

img{filter:grayscale(100%)}

2.使用：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}

3.页面顶部阴影

body:before{
    content: "";

     position: fixed;

    top:-10px;left:0;widht:100%;height:10px;

    box-shadow: 0 0 10px rgba(0,0,0,.8);

    z-index: 2
};

4.给body 添加行高

你不需要分别添加line-height给每个p，h标记等，只要添加到body即可;从body处继承

body{line-height: 1.4}

5.所有的一切都垂直居中

将所有的元素垂直居中，

html, body{height:100%;margin:0}

body{display:flex;display:-webkit-flex;align-items: center}

6.使用负的nth-child选择项目

li{display:none}

li:nth-child(-n+3){display:block}

7对图标使用SVG

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

8.优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你

html{

-moz-osx-font-smoothing:grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;}

ie/edge没有text-rendering支持

9.对纯CSS滑块使用max-height

使用max-height和溢出隐藏来实现只有css的滑块

.slider ul{

    max-height:0;

    overflow:hidden

}

.slider:hover ul{

    max-height: 1000px;

    transition:.3s ease;

}

10.继承box-sizing

让box-sizing继承html:

html{box-sizing:border-box}

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

11.表格单元格等

.calendar{table-layout:fixed}

12.用Flexbox摆脱外边距的各种hack

.list{display:flex;justify-content:space-between}

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

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

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

a[href^="http"]:empty::before{

  content: attr(href)

}

14.CSS写出三角形

.arrow-up{

  widht:0;height:0;

  border-left:5px solid  transparent;

  border-right:5px solid  transparent;

  border-bottom:5px solid#333

}

15.CSS3  calc()的使用

.simpleBlock{widht: calc(100%  -  100px)}

16.禁用鼠标事件

.disabled{pointer-events: none}

17.模糊文本

.blur{color:transparent;text-shadow: 0 0 5px rgba(0,0,0,.5)}