CSS實現相容性的漸變背景 gr

css實現相容性的漸變背景(gradient)效果--webkit核心瀏覽器下的漸變背景

嘿_hio_you

webkit核心瀏覽器下的的基本語法如下：

-webkit-gradient(type, start_point, end_point, / stop...)

-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)

引數型別

簡要說明

type

漸變的型別，可以是線性漸變(linear)或是徑向漸變(radial)

start_point

漸變影象中漸變的起始點

end_point

漸變影象中漸變的結束點

stop

color-stop()方法，指定漸變程序中特定的顏色

inner_center

內部中心點，徑向漸變起始圓環

inner_radius

內部半徑，徑向漸變起始圓

outer_center

外部漸變結束圓的中心點

outer_radius

外部漸變結束圓的半徑

2、關於引數的具體說明

1. start_point和end_point

如果您對photoshop或是flash之類的設計軟體的漸變功能熟悉，那麼理解漸變的一些概念或是引數相對就容易些。例如，我們再photoshop中劃一條漸變線，會有起始點和結束點，這個起始點和結束點就對應這裡的 start_point和end_point引數，如下圖：

start_point(x1,x2)，end_point(x2,y2)，這裡的x,y對應左上角為起點的座標，此處的x,y引數表示與css中的background-position是一致的，可以使畫素值，或是百分比值或是left,top,right,bottom。

當x1等於x2，y1不等於y2，實現垂直漸變，調整y1，y2的值可以調整漸變半徑大小；

當y1等於y2，x1不等於x2，實現水平漸變，調整x1，x2的值可以調整漸變半徑大小；

當y1不等於y2，x1不等於x2，實現角度漸變，當x1,x2,y1,y2取值為極值的時候接近垂直漸變或水平漸變；

當x1等於x2，y1等於y2，實現沒有漸變，取from色，即「 from(顏色值) 」；

2. stop

color-stop()我的理解就是過渡點，這些過渡點有兩個引數，乙個是點的位置，另外乙個是過渡點的顏色。這些引數的示意也可以在photoshop之類的軟體漸變編輯器中找到對應的位置。

我們會見到類似下面的**片段，color-stop(0.5, #ff0000)所表示的意思是在漸變過渡程序的中心位置(50%的位置)有個顏色為#ff0000（紅色）的過渡色。

這裡展示的是最簡單的線性漸變，由藍色至白色的漸變。**如下：

.linear

-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值), [color-stop(位置偏移-小數,停靠顏色值),...],to(結束顏色值));

徑向漸變也可以稱為放射狀漸變，常用來形成環狀效果，暈狀效果等。如下示例**：

.radial

1. 使用from()以及to()方法

body

2. 不指定起始顏色與結束顏色

background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));

3. 多個過渡點在同一位置

width:200px; height:120px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;

CSS實現相容性的漸變背景 gradient 效果

要是兩年前，實現 相容性的漸變效果 這個說法估計不會被提出來的，那個時候，說起漸變背景，想到的多半是ie的漸變濾鏡，其他瀏覽器尚未支援，但是，在對css3支援日趨完善的今天，實現相容性的漸變背景效果已經完全成為可能，本文就將展示如何實現相容性的漸變背景效果。在眾多的瀏覽器中，目前不支援opera瀏覽...

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

一 css3實現相容性漸變背景效果，相容ff chrome ie 漸變效果，現在主流的瀏覽器ff chrome opera ie8 都可以通過帶有私有字首的css3屬性來輕鬆滴實現漸變效果，ie7及以下也可以通過濾鏡來實現漸變效果 濾鏡來實現會消耗大量資源 原因是 由於ie內部在解析 濾鏡，也是通過...

css樣式實現 背景色的漸變效果及相容性

上述 實現了 從左到右的顏色的漸變的效果。background linear gradient to right,rgba 3,110,184,0.22 0 rgba 143,195,31,0.22 100 是chrome的實現效果 filter progid dximagetransform.mi...