經常使用的css3新特性總結

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） 
各個選擇器的權重值相加，值越大，優先級越高。（值相等的時候，後定義的覆蓋先定義的。）