CSS漸層效果

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

很炫的CSS漸層效果

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css漸層效果</title>
</head>

<body>
<div style="FILTER:alpha(opacity=30 finishopacity=0 style=1) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); VERTICAL-ALIGN: middle; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 300px; PADDING-TOP: 4px; BORDER-BOTTOM: #f3f3f3 1px solid; HEIGHT: 100px" align="center"></div>
<!--
參數說明
gradientType=1代表橫向漸層，gradientType=0代表縱向淅變
漸層效果實現：filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF0000,endcolorstr=#FFCC66,gradientType=1)
startcolorstr="色彩"代表漸層開頭的色彩
endcolorstr="色彩"代表漸層結尾的色彩

         opacity 透明度。預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
         finishopacity 是一個選擇性參數，如果想要設定漸層的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
        style 指定透明地區的形狀特徵：
        0 代表統一形狀
        1 代表線形
        2 代表放射狀
        3 代表矩形
         startx 漸層透明效果開始處的 X座標。
         starty 漸層透明效果開始處的 Y座標。
         finishx 漸層透明效果結束處的 X座標。
         finishy 漸層透明效果結束處的 Y座標。
具體效果應用如下：

         CSS濾鏡實現代碼效果拷屏
         正常圖片
         ＜img src="pic1.jpg"
          width="180" height="120"＞
           透明度為60
         ＜img src="pic1.jpg"
          style="filter:alpha(opacity=60)"
           width="180" height="120"＞
           地區透明度設定，從(0,5)到(90,60)
          ＜img src="pic1.jpg"
          style="filter:alpha(
          opacity=0, finishopacity=100,
          style=1,
          startx=0,starty=5,
          finishx=90,finishy=60"
          width="180" height="120" ＞

margin:0px;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff45c8ff', endColorStr='#ffffffff', gradientType='0');
}

PS:樣式裡面唯寫了濾鏡部分了，根據自己需要自己加吧。嘿嘿，我比較懶

解釋下這個CSS裡面的東西：
startColorStr='#ffeeeeee'

startColorStr為漸層起始顏色，ff為16進位透明度

endColorStr='#ffeeeeee'

endColorStr為漸層結束顏色，ff為16進位透明度

gradientType='0'

gradientType漸層方向，'0'為垂直方向， '1'為水平方向（預設值為'1'）

-->
</body>
</html>

很炫的效果，可惜只有ie支援，不知道哪裡可以找到瀏覽器安全色的漸層CSS沒。

簡單單色漸層例子

上面有點複雜，看個簡單的單色漸層，效果如下（同樣只能在IE中才出現效果）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More