1:CSS3陰影 box-shadow的使用和技巧總結：

基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色}

box-shadow屬性的參數設置取值：

陰影類型：此參數可選。如不設值，默認投影方式是外陰影；如取其唯一值“inset”，其投影為內陰影；

X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊；

Y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部；

陰影模糊半徑：此參數可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

陰影顏色：此參數可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現為透明色，在Firefox/Opera下表現為黑色（已驗證），建議不要省略此參數。

2：實現多行文本超出顯示…(火狐瀏覽器不支持)

display:-webkit-box
-webkit-line-camp:3;
-webkit-box-orient:vertical;

3：取消默認的高亮顯示

 -webkit-tap-highlight-color:rgba(0,0,0,0);

4:消除手機端默認樣式

-webkit-apperance:none;

5:css不顯示滾動條

::-webkit-scrollbar{
      width:0;
    }

6：before和after元素不設置content時會不顯示。

7：設置或檢索是否允許用戶選中文本

user-select:none|text|all|element
文本不能被選擇
none：

可以選擇文本

text：

8：實現圖片自適應的方式
- 使用picture元素（H5新增）
- 使用img的srcset，sizes屬性

<picture>
      <source  srcset="a.png" media="(max-width:750px)"/>
      <source srcset="b.png"/>
      <img srcset="b.png"/>
 </picture>

這個元素是有兼容性的，需要添加額外的插件

<script src="picturefill.js"></script>

<img src="a.png" srcset="a.png,b.png" sizes="(max-width:500px) 128px,256px"/>

上面這段代碼的意思表示：不支持srcset屬性時，使用src中的圖片，否則瀏覽器會自動匹配最佳顯示圖片；sizes屬性的值表示當可視區寬度不大於500像素，則圖片寬度顯示為128px，其他情況下，圖片寬度顯示為512px。

10: 文本最多顯示3行，超出顯示...

p{   
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
 }

11：元素開啟GPU硬件加速
當頁面中有動畫效果時開啟GPU硬件加速讓瀏覽器在渲染動畫時從CPU轉向GPU，從而頁面渲染速度，減少頁面卡頓現象。
開啟硬件加速的方法

-webkit-transform: translate3d(0, 0, 0); 
或者 transform:translateZ(0); 

另外開啟硬件加速後可能會導致頁面頻繁閃爍或者抖動可以嘗試用一下方法解決

-webkit-backface-visibility:hidden； 
-webkit-perspective:1000;

12:-webkit-font-smoothing:設置字體的抗鋸齒或者順滑度。
它有三個值：
none —— 對小像素的文本比較好
subpixel-antialiased ——默認值
antialiased ——抗鋸齒很好

13: pointer-events
讓a元素不可點擊，後來才發現使用這個屬性就可以做到

a[href="http://example.com"] {
    pointer-events: none;
}
<li><a href="http://example.com">一個不能點擊的鏈接</a></li>

14: css3下三角的實現

<div class="down-triangle"></div>
.down-triangle{
  width: 0;
  height: 0;
  border-color: green;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid red;
}

15：css各個選擇器優先級原則

!importan > 行內樣式（style屬性）> 內部樣式（style標簽）> 外部樣式文件
id > class（偽類選擇器，屬性選擇器） > 元素選擇器 > *

計算方式：

選擇器的權重 
id（100） 
class = 屬性選擇器 = 偽類選擇器（10） 
元素選擇器（1） 
各個選擇器的權重值相加，值越大，優先級越高。（值相等的時候，後定義的覆蓋先定義的。）

常用的css3新特性總結