css3漸變屬性的簡單介紹及應用

2021-10-23 04:35:04 字數 1888 閱讀 3568

-ms-	   -ms-box-shadow	ie瀏覽器專屬的css屬性需新增-ms-字首

-moz- -moz-box-shadow 所有基於gecko引擎的瀏覽器(如firefox)專屬的css屬性需新增-moz-字首

-o- -o-box-shadow opera瀏覽器專屬的css屬性需新增-o-字首

-webkit- -webkit-box-shadow 所有基於webkit引擎的瀏覽器(如chrome、safari)專屬的css需新增-webkit-字首

css3 漸變(gradient)可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前,你必須使用影象來實現這些效果,現在通過使用 css3 的漸變(gradients)即可實現。此外,漸變效果的元素在放大時看起來效果更好,因為漸變(gradient)是由瀏覽器生成的。
線性漸變
語法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

說明:direction:預設為to bottom,即從上向下的漸變;

stop:顏色的分布位置,預設均勻分布,例如有3個顏色,各個顏色的stop均為33.33%。

角度是指水平線和漸變線之間的角度,逆時針方向計算。換句話說,0deg 將建立乙個從下到上的漸變,90deg 將建立乙個從左到右的漸變。

但是,請注意很多瀏覽器(chrome,safari,fiefox等)的使用了舊的標準,即 0deg 將建立乙個從左到右的漸變,90deg 將建立乙個從下到上的漸變。換算公式 90 - x = y 其中 x 為標準角度,y為非標準角度。

徑向漸變

徑向漸變不同於線性漸變,線性漸變是從「乙個方向」向「另乙個方向」的顏色漸變,而徑向漸變是從「乙個點」向四周的顏色漸變
語法:

background: radial-gradient(center, shape, size, start-color, ..., last-color);

說明:center:漸變起點的位置,可以為百分比,預設是圖形的正中心。

shape:漸變的形狀,ellipse表示橢圓形,circle表示圓形。預設為ellipse,如果元素形狀為正方形的元素,則ellipse和circle顯示一樣。

size:漸變的大小,即漸變到**停止,它有四個值。 closest-side:最近邊; farthest-side:最遠邊; closest-corner:最近角; farthest-corner:最遠角。

div

div

div

div

circle:漸變為最大的圓形; ellipse:根據元素形狀漸變,元素為正方形是顯示效果與circle無異

重複性漸變

1.重複性線性漸變

div

2.重複性徑向漸變

div

css3的漸變屬性

css3的漸變 css3漸變 由瀏覽器生成進行渲染的 1.線性漸變 background webkit linear gradient 方向,顏色1,顏色2,顏色3,單一方向漸變 left right top bottom 從 那邊 開始 注意 需要新增相容字首 to left 到 那邊 結束 to...

詳解CSS 3 漸變屬性

css 3中的漸變屬性的支援度具體是 ie10 ff3.6 safari4.0 chrome opera11.1 ios3.2 opera mobile11.1 android,也就是說除了ie10以外其它的瀏覽器已經支援 css3 的漸變屬性了 雖然有些還在使用私有屬性 opera暫不支援徑向漸變...

CSS3動畫屬性簡單介紹

css3的動畫屬性 下面的 列出了 keyframes 規則和所有動畫屬性 屬性 描述 css keyframes 規定動畫。3 animation 所有動畫屬性的簡寫屬性,除了 animation play state 屬性。3 animation name 規定 keyframes 動畫的名稱。...