CSS3實現相容性的漸層背景效果

標籤：style   color   os   ar   strong   for   art   div   sp   

一、CSS3實現相容性漸層背景效果，相容FF、chrome、IE

漸層效果，現在主流的瀏覽器FF、Chrome、Opera、IE8+都可以通過帶有私人首碼的CSS3屬性來輕鬆滴實現漸層效果，IE7及以下也可以通過濾鏡來實現漸層效果（濾鏡來實現會消耗大量資源）

？為什麼濾鏡實現漸層效果會消耗大量資源      呵呵，菜鳥，什麼都不懂，就只會百度了。見笑了。

原因是：由於IE內部在解析濾鏡，也是通過大量的CPU計算，從而達到濾鏡效果，最後再渲染。

二、各瀏覽器是如何?漸層效果的

1、CSS3實現漸層背景的標準寫法

background: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

• []在正則中表示一個字元類，這裡，你可以理解為一個小單元。
• |表示候選。也就是“或者”的意思，要麼前面的，要麼就後面的。
• ?為量詞，表示0個或1個，言外之意就是，你可以不指定方向，直接漸層色走起。

　side-or-corner
side-or-corner中文意思就是“邊或角”，可選值有：

[left | right] || [top | bottom]

color-stop
漸層關鍵顏色結點，文法為：

<color> [ <percentage> | <length> ]

Gecko核心的瀏覽器：    
background:-moz-linear-gradient(top, #CCC, #333);
Webkit核心的瀏覽器：
background:-webkit-gradient(linear, top, from(#CCC), to(#333));
IE8及以下通過濾鏡實現：
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr=‘#CCC‘,endColorStr=‘#333‘);  /*IE濾鏡實現漸層*/
其中，gradientType=1代表橫向漸層，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸層漸層起始的色彩，endcolorstr=”色彩” 代表漸層結尾的色彩。
IE8+:
background: -ms-linear-gradient(#CCC 0%,#333 100%);

 

CSS3實現相容性的漸層背景效果