1.把彩色的圖片變成黑白的圖片

img.desaturate{
       filter:grayscale(100%);
       -webkit-filter:grayscale(100%);
       -moz-filter:grayscale(100%);
       -ms-filter:grayscale(100%);
       -o-filter:grayscale(100%);
}

2.導(dǎo)航上應(yīng)用/取消邊框:not()

//先給導(dǎo)航添加邊框
.nav li{
     border-right: 1px solid #666;
}
//然后再去掉最后一個
.nav li:last-child{
     border-right: none;
}

//------------------------------
//可以直接使用:not()偽類來應(yīng)用元素
.nav li:not(:last-child){
      border-right:1px solid #666;
}

//-------------------------------
//如果新元素有兄弟元素，也可以直接使用通用的兄弟選擇符(~)
..nav li:first-child ~ li{
      border-left: 1px solid #666;
}

3.頁面頂部添加陰影(CSS3)

body:before{
         content: "";
         position:fixed;
         top: -10px;
         left:0;
         width:100%;height:10px;
         -webkit-box-shadow:0px 0px 10px rgba(0,0,0,.8);
         -mos-box-shadow:0px 0px 10px rgba(0,0,0,.8);
         box-shadow:0px 0px 10px rgba(0,0,0,.8);
}

4.body添加行高

//不需要分別添加line-height到每個p,h標(biāo)簽
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;
}

6.逗號分隔列表

//讓HTML列表項看上去像一個真正的，用逗號分隔的列表
ul > li:not(:last-child)::after{
       content:",";
}//對最后一個列表項使用:not()偽類

7.使用負(fù)的nth-child選擇項目

//使用負(fù)的nth-child選擇項目1到項目n
li{display:none;}
li:nth-child(-n+3){display:block;}//選擇項目1至3并顯示它們

8.使用SVG圖標(biāo)

.logo{background:url("logo.svg");}
//SVG對所有的分辨率類型都具有良好的擴(kuò)展性，可以避開.png、jpg或.gif文件了

9.優(yōu)化顯示文本

html{
      -mos-osx-font-smoothing:grayscale;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;//IE不支持text-rendering
}

10.模糊文本

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

11.禁用鼠標(biāo)點(diǎn)擊事件

//CSS3新增的pointer-events禁用元素的鼠標(biāo)事件
.disabled{pointer-events:none;}

12.CSS3中使用calc()

//calc()用法類似于函數(shù)，給元素設(shè)置動態(tài)值
.simpleBlock{width:calc(100%-100px);}

.complexBlock{
       width:calc(100% - 50%/3);
       padding: 5px calc(3% - 2px);
       margin-left: calc(10% + 10px);
}

13.文本漸變

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, left top, left bottom, from(rgba(0,0,0,0)),color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

14.三角形(利用border來寫三角形)

//向上
div.arrow-up{
       width:0px;height:0px;
       border-left:5px solid transparent;/*向左傾斜*/
       border-right:5px solid transparent;/*向右傾斜*/
       border-bottom:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}

//向下
div.arrow-down{
       width:0px;height:0px;
       border-left:5px solid transparent;/*向左傾斜*/
       border-right:5px solid transparent;/*向右傾斜*/
       border-top:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}

//向左
div.arrow-left{
       width:0px;height:0px;
       border-bottom:5px solid transparent;
       border-top:5px solid transparent;
       border-right:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}

//向右
div.arrow-right{
       width:0px;height:0px;
       border-bottom:5px solid transparent;
       border-top:5px solid transparent;
       border-left:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}