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);

　　}