20 个 CSS 高级技巧汇总

　　1.黑白图像。

　　这段代码会让你的彩色照片显示为黑白照片，是否是很酷？

　　img.desaturate{

　　    filter:grayscale(100%);

　　    -webkit-filter:grayscale(100%);

　　    -moz-filter:grayscale(100%);

　　    -ms-filter:grayscale(100%);

　　    -o-filter:grayscale(100%);

　　}

　　2.使用:not()在菜单上应用/取消应用边框

　　先给每个菜单项添加边框

　　/*addborder*/

　　.navli{

　　    border-right:1pxsolid#666;

　　}

　　……而后再除去最后一个元素……

　　//removeborder/

　　.navli:last-child{

　　    border-right:none;

　　}

　　……能够直接使用:not()伪类来应用元素：

　　.navli:not(:last-child){

　　    border-right:1pxsolid#666;

　　}

　　这样代码就干净，易读，易于理解了。固然，若是你的新元素有兄弟元素的话，也可使用通用的兄弟选择符（~）：

　　..navli:first-child~li{

　　    border-left:1pxsolid#666;

　　}

　　3.页面顶部阴影

　　下面这个简单的css3代码片断能够给网页加上漂亮的顶部阴影效果：

　　body:before{

　　    content:"";

　　    position:fixed;

　　    top:-10px;

　　    left:0;

　　    width:100%;

　　    height:10px;

　　    -webkit-box-shadow:0px0px10pxrgba(0,0,0,.8);

　　    -moz-box-shadow:0px0px10pxrgba(0,0,0,.8);

　　    box-shadow:0px0px10pxrgba(0,0,0,.8);

　　    z-index:100;

　　}

　　4.给body添加行高

　　你不须要分别添加line-height到每一个p,

　　h标记等。只要添加到body便可：

　　body{

　　    line-height:1;

　　}

　　这样文本元素就能够很容易地从body继承。

　　5.全部一切都垂直居中

　　要将全部元素垂直居中，太简单了：

　　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。

　　6.逗号分隔的列表

　　让html列表项看上去像一个真正的，用逗号分隔的列表：

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

　　    content:",";

　　}

　　对最后一个列表项使用:not()伪类。

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

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

　　li{

　　    display:none;

　　}

　　/*selectitems1through3anddisplaythem*/

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

　　    display:block;

　　}

　　8.对图标使用SVG

　　咱们没有理由不对图标使用SVG：

　　.logo{

　　    background:url("logo.svg");

　　}

　　SVG对全部的分辨率类型都具备良好的扩展性，并支持全部浏览器都回归到IE9。这样能够避开.png、.jpg或.gif文件了。

　　9.优化显示文本

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

　　html{

　　    -moz-osx-font-smoothing:grayscale;

　　    -webkit-font-smoothing:antialiased;

　　    text-rendering:optimizeLegibility;

　　}

　　注：请负责任地使用optimizeLegibility。此外，IE/Edge没有text-rendering支持。

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

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

　　.sliderul{

　　    max-height:0;

　　    overlow:hidden;

　　}

　　.slider:hoverul{

　　    max-height:1000px;

　　    transition:.3sease;

　　}

　　11.继承box-sizing

　　让box-sizing继承html：

　　html{

　　    box-sizing:border-box;

　　}

　　*,*:before,*:after{

　　    box-sizing:inherit;

　　}

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

　　12.表格单元格等宽

　　表格工做起来很麻烦，因此务必尽可能使用table-layout:fixed来保持单元格的等宽：

　　.calendar{

　　    table-layout:fixed;

　　}

　　13.用Flexbox摆脱外边距的各类hack

　　当须要用到列分隔符时，经过flexbox的space-between属性，你就能够摆脱nth-，first-，和last-child的hack了：

　　.list{

　　    display:flex;

　　    justify-content:space-between;

　　}

　　.list.person{

　　    flex-basis:23%;

　　}

　　如今，列表分隔符就会在均匀间隔的位置出现。

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

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

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

　　    content:attr(href);

　　}

　　至关方便。

　　15.检测鼠标双击

　　HTML：

　　CSS：

　　.test3span{

　　    position:relative;

　　}

　　.test3spana{

　　    position:relative;

　　    z-index:2;

　　}

　　.test3spana:hover,

　　.test3spana:active{

　　    z-index:4;

　　}

　　.test3spaninput{

　　    background:transparent;

　　    border:0;

　　    cursor:pointer;

　　    position:absolute;

　　    top:-1px;

　　    left:0;

　　    width:101%;

　　    /*Hacky*/

　　    height:301%;

　　    /*Hacky*/

　　    z-index:3;

　　}

　　.test3spaninput:focus{

　　    background:transparent;

　　    border:0;

　　    z-index:1;

　　}

　　16.CSS写出三角形

　　利用border来写三角形代码，而且兼容IE6.

　　/*createanarrowthatpointsup*/

　　div.arrow-up{

　　    width:0px;

　　    height:0px;

　　    border-left:5pxsolidtransparent;

　　    /*leftarrowslant*/

　　    border-right:5pxsolidtransparent;

　　    /*rightarrowslant*/

　　    border-bottom:5pxsolid#2f2f2f;

　　    /*bottom,addbackgroundcolorhere*/

　　    font-size:0px;

　　    line-height:0px;

　　}

　　/*createanarrowthatpointsdown*/

　　div.arrow-down{

　　    width:0px;

　　    height:0px;

　　    border-left:5pxsolidtransparent;

　　    border-right:5pxsolidtransparent;

　　    border-top:5pxsolid#2f2f2f;

　　    font-size:0px;

　　    line-height:0px;

　　}

　　/*createanarrowthatpointsleft*/

　　div.arrow-left{

　　    width:0px;

　　    height:0px;

　　    border-bottom:5pxsolidtransparent;

　　    /*leftarrowslant*/

　　    border-top:5pxsolidtransparent;

　　    /*rightarrowslant*/

　　    border-right:5pxsolid#2f2f2f;

　　    /*bottom,addbackgroundcolorhere*/

　　    font-size:0px;

　　    line-height:0px;

　　}

　　/*createanarrowthatpointsright*/

　　div.arrow-right{

　　    width:0px;

　　    height:0px;

　　    border-bottom:5pxsolidtransparent;

　　    /*leftarrowslant*/

　　    border-top:5pxsolidtransparent;

　　    /*rightarrowslant*/

　　    border-left:5pxsolid#2f2f2f;

　　    /*bottom,addbackgroundcolorhere*/

　　    font-size:0px;

　　    line-height:0px;

　　}

　　17.CSS3calc()的使用

　　calc()用法相似于函数，可以给元素设置动态的值：

　　/*basiccalc*/

　　.simpleBlock{

　　    width:calc(100%-100px);

　　}

　　/*calcincalc*/

　　.complexBlock{

　　    width:calc(100%-50%/3);

　　    padding:5pxcalc(3%-2px);

　　    margin-left:calc(10%+10px);

　　}

　　18.文本渐变

　　文本渐变效果很流行，使用CSS3可以很简单就实现：

　　h2[data-text]{

　　    position:relative;

　　}

　　h2[data-text]::after{

　　    content:attr(data-text);

　　    z-index:10;

　　    color:#e3e3e3;

　　    position:absolute;

　　    top:0;

　　    left:0;

　　    -webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,1)),to(rgba(0,0,0,0)));

　　}

　　19.禁用鼠标事件

　　CSS3新增的pointer-events让你可以禁用元素的鼠标事件，例如，一个链接若是设置了下面的样式就没法点击了。

　　.disabled{

　　    pointer-events:none;

　　}

　　20.模糊文本

　　简单但很漂亮的文本模糊效果，简单又好看！

　　.blur{

　　    color:transparent;

　　    text-shadow:005pxrgba(0,0,0,0.5);

　　}