css3 背景漸變

2022-07-19 04:36:09 字數 1140 閱讀 7584

在沒有了解css也可以做背景漸變以前,我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而,在前不久我了解到css3也可以做背景漸變後,想要做背景漸變的效果就很容易了許多,下面是一些css3做背景漸變的方法。

一.線性漸變

//自上而下的線性漸變

div

//從左往右的線性漸變

div

第乙個引數是漸變開始的方向,後面不需跟漸變結束方向;漸變的方向看可以是自上而下,也可以是從左往右;

第二個引數是漸變開始的顏色;

第三個引數是漸變結束的顏色。

二.加入stop()函式的線性漸變

div

上面**的意思是:從左15%處,到50%處,再到85%處,最後到右邊,顏色漸變的順序為blue到#1a82f7, #2f2727, #1a82f7再到red。

三.徑向漸變(從圓心到圓外)

div

上面**的意思是:乙個顏色從blue到red的,從圓心向外圍擴散的徑向漸變。

如果引數circle換為ellipse,則為橢圓形的徑向漸變。

四.正對ie瀏覽器的背景漸變

ie瀏覽器實現漸變只能使用ie自己的濾鏡來實現。

filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#00ffff,endcolorstr=#9fffff,grandienttype=1);

第乙個引數:漸變起始位置的顏色;

第二個引數:漸變終止位置的顏色;

第三個引數:漸變的型別,0代表豎向漸變,1代表橫向漸變。

注意:ie瀏覽器的背景漸變設定不需要給background設定,直接使用filter即可。

雖然css3的背景漸變功能強大,但也存在瀏覽器相容性問題。目前css3背景漸變屬性的具體支援情況為:ie10,firefox3.6+,safari4.0+,chrome,opera11.1(暫不支援徑向漸變)+,ios 3.2+,opera mobile11.1,android。因此我們在運用css3做背景漸變時需要注意瀏覽器相容性這一點。

css3 顏色 背景 漸變

漸變放在 css裡的語句 一定要按這個順序排,才不會出錯。否則 有的瀏覽器會不正常,今天本來調好了,發現ie9不行,搞了半天不行,崩潰了 最後準備還是使用背景算了 最後一次 測試,終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...

css3實現背景漸變

一 線性漸變 詳細 在css3中,可以使用 linear gradient實現背景線性漸變。linear gradient to left right top bottom 在ff瀏覽器時需要將樣式 書寫成 moz linear gradient chrome瀏覽器時需要寫成 webkit line...

css3背景和漸變

background clipcss3 背景影象區域 background clip border box background clip padding box background clip content box 例子 background clip border box background...