CSS中背景的Linear Gradients(線性漸變)應用

2024-07-11 08:29:03

字體：大中小

來源：轉載

供稿：網友

webkit內核的safari、 Chrome的Linear Gradients (線性漸變)

-webkit-gradient是background的一個屬性值；webkit內核的safari、 Chrome的Linear Gradients (線性漸變) 基本語法：

復制代碼

代碼如下:
background-image:-webkit-gradient(type, x1 y1, x2 y2, from(開始顏色值), to(結束顏色值), [color-stop(偏移量小數, ?？款伾?, ...] );

webkit內核的Linear Gradients (線性漸變) 第一組參數type（類型）為 linear；第二組參數是“x1 y1, x2 y2”，顏色開始點和顏色結束點的坐標。“x1, x2, y1, y2"的取值范圍為0%-100%，x1和x2也可以取值left（或0%）或right（或100%），同樣y1和y2可以取值top（或0%）或bottom（或100%）；當x1等于x2，y1不等于y2，實現垂直漸變，調整y1，y2的值可以調整漸變半徑大??；當y1等于y2，x1不等于x2，實現水平漸變，調整x1，x2的值可以調整漸變半徑大小；當y1不等于y2，x1不等于x2，實現角度漸變當x1等于x2，y1等于y2，實現沒有漸變，取from色，即“ from(顏色值) ”；from(開始顏色值), to(結束顏色值)是兩個漸變顏色值；[color-stop(偏移量<小數> ,停靠顏色值), ...]：可以使用多個color-stop，如果漸變只有2個顏色，那么可以不使用該參數；偏移量必須為小數，如果偏移量>=1,那么該color-stop相當于無效；firefox下的Linear Gradients (線性漸變) 請參閱：

演示

復制代碼

代碼如下:
div {
width:200px;
height:200px;
border:1px solid #CCC;
background-image: -webkit-gradient(linear, 0% 0%, 50% 100%, from(#000), to(#FFF), color-stop(0.3, #336600), color-stop(0.5, yellow));
}

效果：

注意：紅線上的顏色值都是相同的，并且和"綠色"的線保持垂直。

Firefox的Linear Gradients (線性漸變)

-moz-linear-gradient是background的一個屬性值；Firefox的Linear Gradients基本語法：

復制代碼

代碼如下:
background-image:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Point：漸變出發的點（開始點）。
單位可以是百分比，也可以是像素?；蚴褂胠eft、center、right進行水平定位，也可以使用top、center、buttom進行垂直定位。這點非常像background-position。angle：漸變出發的方向，它代表的是漸變方向和水平線之間的夾角，逆時針方向。stop：漸變停靠點，它有兩部分組成<color, pos>，pos為0~100%之間的值。注意0%代表的是“起始點”，100%代表的是“結束點”。

示例

復制代碼

上一篇：CSS優先級和!important與IE6的BUG討論及解決方案

下一篇：IE6下CSS多類選擇符優先級不起作用的bug分析及解決方法

發表評論

共有條評論