最近在幫公司做網站時，用到了比較多的漸變效果和透明作用，linear-gradient等，現記錄下來。畢竟少用，易忘呀。

【一】漸變效果

.nav0_item:hover, .nav0_item_current
{
background: -moz-linear-gradient(top, rgba(178, 178, 178, 1) 0%, rgba(222, 222, 222, 1) 49%, rgba(197, 197, 197, 1) 51%, rgba(200, 200, 200, 1) 100%);
background: -o-linear-gradient(top, rgba(178, 178, 178, 1) 0%, rgba(222, 222, 222, 1) 49%, rgba(197, 197, 197, 1) 51%, rgba(200, 200, 200, 1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(178, 178, 178, 1)),color-stop(0.49,rgba(222, 222, 222, 1)),color-stop(0.51,rgba(197, 197, 197, 1)), color-stop(1, rgba(200, 200, 200, 1)));
background: -webkit-linear-gradient(top, rgba(178, 178, 178, 1) 0%, rgba(222, 222, 222, 1) 49%, rgba(197, 197, 197, 1) 51%, rgba(200, 200, 200, 1) 100%);
color: #EA470B;
}

第三行后的兩個-webkit-中，雖然同樣是針對webkit核心的瀏覽器，但部分瀏覽器不支持后者（如傲游），但前者大部分都支持。兩者的先后問題，有沒有需要考慮呢？看具體情況。

上面的代碼中，主要說明了用到linear（線性漸變），并指定漸變的方向、途中相應路徑的顏色rgba。

效果如下圖：

?

在部分版本低的IE瀏覽器中，不支持上面的CSS！當然要補充另外一種方法。PS：上圖的效果在IE下用CSS做覺得麻煩了，我是偷懶在判斷是ie核心時，直接調用另外一個CSS，它是用背景圖片填充的。下面這個代碼實現另外一種平鋪漸變效果，沒中間那條亮痕。

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66f4f4f4,endcolorstr=#f4f4f4,gradientType=0)

【二】透明，這個沒多少好說的。第二個是針對IE的。

opacity：0.5
filter:alpha(opacity=20)

轉載于:https://www.cnblogs.com/oneivan/archive/2011/11/27/2264974.html

總結

以上是生活随笔為你收集整理的CSS中一些渐变效果与透明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。