CSS3:linear-gradient,线性渐变的使用方法
CSS3 漸變(gradients)可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。 以前,你必須使用圖像來(lái)實(shí)現(xiàn)這些效果,現(xiàn)在通過(guò)使用 CSS3 的漸變(gradients)即可實(shí)現(xiàn)。此外,漸變效果的元素在放大時(shí)看起來(lái)效果更好,因?yàn)闈u變(gradient)是由瀏覽器生成的。
本文只講述表準(zhǔn)的語(yǔ)法,要想兼容更多瀏覽器可以到網(wǎng)上搜索出很多解決方案,邏輯基本一致。
1.語(yǔ)法
background: linear-gradient(direction, color-stop1, color-stop2, ...);direction:默認(rèn)為to bottom,即從上向下的漸變;
stop:顏色的分布位置,默認(rèn)均勻分布,例如有3個(gè)顏色,各個(gè)顏色的stop均為33.33%。
2.示例:to left、top right、to bottom、to top
div { background:linear-gradient(to left, red , blue) } div { background:linear-gradient(to right, red , blue) } div { background:linear-gradient(to bottom, red , blue) } /* 瀏覽器默認(rèn)值 */ div { background:linear-gradient(to top, red , blue) }分別產(chǎn)生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變,效果如下圖:
??
3.示例:to right bottom、top right top、top left bottom、top left top
div { background: linear-gradient(to right bottom, red , blue); } div { background: linear-gradient(to right top, red , blue); } div { background: linear-gradient(to left bottom, red , blue); } div { background: linear-gradient(to left top, red , blue); }分別產(chǎn)生到“右下角”、“右上角”、“左下角”、“左上角”的漸變,效果如下圖:
?
注意:top right bottom和top bottom right是等同的
4.使用角度
div { background: linear-gradient(10deg, red, blue) }效果如下圖:
5.多個(gè)漸變點(diǎn)
5.1 多個(gè)漸變點(diǎn)默認(rèn)均勻分布
div { background: linear-gradient(to right, red, blue, green) }理論上漸變點(diǎn)數(shù)目不受限制,實(shí)際效果如下圖:
5.2 多個(gè)漸變點(diǎn)不均勻分布
div { background: linear-gradient(red 5%, green 15%, blue 60%) }6.重復(fù)性漸變
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }10%的位置為yellow,20%的位置為green,然后按照這20%向下重復(fù),效果如下圖:
7.使用rgba
div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }從紅色的不透明,到全透明的漸變,效果圖如下:
參考文章:CSS3 漸變(Gradients)、CSS3 Gradient_gradient, css3屬性詳解
總結(jié)
以上是生活随笔為你收集整理的CSS3:linear-gradient,线性渐变的使用方法的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: [Leetcode] Sqrt(x)
- 下一篇: html块状元素高度,CSS:如何计算块