CSS3漸變背景色的一些運用

2021-10-02 12:57:32 字數 725 閱讀 3355

css3的背景background,運用時一般會選擇插入背景圖,以及運用背景色,在設定背景色時,有一種特殊的效果,就是顏色漸變

css3為背景提供了漸變支援,通過呼叫linear-gradient實現

linear-gradient

(方向,顏色1,顏色2,...)

顏色將會從顏色1漸變到顏色2,方向一般有如下幾個值

to top 向上

to bottom 向下

to left 向左

to right 向右

以上四種任意兩兩組合

xdeg 精確的角度值,x為具體角度,配合deg來實現網頁設計中的角度表達

顏色漸變使用較為簡單,只需要利用linear-gradient函式就可實現

>

...type

="text/css"

>

divstyle

>

head

>

>

"dvl"

style

="background

:linear-gradient

(to top,#000,#fff)

">

div>

body

>

將會創造出乙個從底向上,從黑到白的背景

CSS3之背景色漸變

但是美中不足的時,各瀏覽器雖然支援css3的gradient,卻不能達成統一意見,完美的寫法是在gradient前加上各瀏覽器的字首,如 webkit moz ie8以上瀏覽器可通過ie自帶的濾鏡實現漸變功能。儘管如此,像低於ie8瀏覽器的這些古董,雖然已被世界範圍內的市場淘汰,但作為中國的it程式...

css3背景色過渡

css高階 背景顏色徑向漸變 背景顏色線性漸變 過渡背景顏色徑向漸變 徑向漸變 中間部分橢圓形,四周填充 由中間到四周漸變 background radial gradient red,yellow 紅橢圓填充黃色 background radial gradient circle,red,yell...

CSS3背景色透明 相容IE8

標準瀏覽器通過rgba 實現背景色透明 ie8以下瀏覽器通過特有濾鏡實現背景色透明。如下 1 1 ie8 2 2 filter progid dximagetransform.microsoft.gradient startcolorstr 7f000000,endcolorstr 7f000000...