一、黑白图像

当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

二、使用 :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

}

如果你的元素有兄弟元素的话，也可以使用通用的熊年底选择符( ~ ）

.nav li:first-child ~ li{

border-left: 1px solid #666

}

三、页面顶部阴影

给网页加上漂亮的顶部阴影效果

body:before{

content: '';

position: fixed;

top: -10px;

left: 0;

width: 100%;

height: 10px;

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

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

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

z-index: 100;

}

四、给 body 添加行高

不需要给别给 p,h之类的添加行高，直接：

body{

line-height: 1;

}

五、所有一切都垂直居中

html,body{

height: 100%;

margin: 0;

}

body{

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

IE11中需要注意 flexbox

六、逗号分隔列表

让HTML列表项看上去像被一个真正的，分隔的列表

ul > li:not(:last-child)::after{

content: "，";

}

七、使用负的 nth-child 选择项目

在 css 中使用负的 nth-child 选择项目1到项目n

li{

display: none;

}

li:nth-child(-n+3){

display: block;

}

八、对图标使用 SVG

.logo{

background: url("logo.svg");

}

九、优化显示文本

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

html{

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizelegibility;

}

因时间有限，后十种方法只能等以后有时间再给你分享了！如果想现在获取，私信我就可以领取了。希望能对你有所帮助