css如何實(shí)現(xiàn)顏色的漸變？？

需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供富平網(wǎng)站建設(shè)、富平做網(wǎng)站、富平網(wǎng)站設(shè)計(jì)、富平網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、富平企業(yè)網(wǎng)站模板建站服務(wù)，十載富平做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的style標(biāo)簽中，輸入css代碼：

div{width:200px;height:150px;background:linear-gradient(red,white);}

3、瀏覽器運(yùn)行index.html頁面，此時(shí)td中的div的背景顏色從紅色到白色漸變。

CSS中的漸變——線性漸變

CSS提供了一種繪制漸變圖的機(jī)制，這個(gè)漸變的機(jī)制可以接受任何圖片的屬性聯(lián)合使用，包括background-image，我們可以嘗試使用一個(gè)漸變背景：

有些舊版本的WebKit瀏覽器只支持線性漸變

使用到的linear-gradient()函數(shù)，可以假設(shè)一條線，從元素頂部到底部繪制了一個(gè)漸變背景，這條線的角度由這個(gè)函數(shù)的前面關(guān)鍵字（to，bottom），位置由0%處的顏色是淺灰色，而位置100%處也就是元素頂部的顏色是深藍(lán)色。

漸變線的方向可以使用關(guān)鍵字to，再加上一個(gè)表示邊的（top、right、bottom、left）或者使用角來表示（top left、top right、bottom left、bottom right）的關(guān)鍵字來指定。

此外還可以使用deg單位指定漸變線的角度，0deg表示垂直向上，增大角度值就意味著沿順時(shí)針方向旋轉(zhuǎn)，直到360deg，度數(shù)表示繪制漸變的方向，因此起點(diǎn)就在我們指定的相反方向。

當(dāng)設(shè)置為45deg的漸變：

線性漸變的默認(rèn)方向是自上而下的，而且0%和100%分別表示第一個(gè)和最后一個(gè)色標(biāo)的位置，因此，可以簡寫為：

新增色標(biāo)若未指定位置，則在0%~100%范圍內(nèi)取均值，比如：有3個(gè)未指定位置的色標(biāo)，那么它們的位置分布為0%、50%、100%

除了百分比外，還可以使用絕對值指定色標(biāo)的位置，比如：

這種寫法漸變是頂部從淺藍(lán)色開始漸變，往下走100px之后過渡到深藍(lán)色，然后一直到底部都是深藍(lán)色。

CSS 陰影 輪廓 漸變詳解

輪廓是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用, 比如

實(shí)現(xiàn)線性漸變，你至少需要定義兩種顏色的結(jié)點(diǎn)，這兩種結(jié)點(diǎn)就是你想平穩(wěn)過渡的顏色，即：其中一種顏色結(jié)點(diǎn)為起點(diǎn)，另一種顏色結(jié)點(diǎn)為結(jié)束點(diǎn)

同時(shí)也可以定義漸變的方向，是從上到下漸變，還是從左至右漸變，或者從右至左漸變，默認(rèn)情況下是從上至下漸變的

當(dāng)然也可以對角漸變，如：從左上角到右下角

創(chuàng)建重復(fù)的線性漸變

to left：設(shè)置漸變?yōu)閺挠业阶?。相?dāng)于: 270deg

to right：設(shè)置漸變從左到右。相當(dāng)于: 90deg

to top：設(shè)置漸變從下到上。相當(dāng)于: 0deg

to bottom：設(shè)置漸變從上到下。相當(dāng)于: 180deg (這是默認(rèn)值，等同于留空不寫)

如果還想更多地控制漸變方向，可以改變漸變的角度

也可以在漸變中使用透明度, 所以我們得使用 rgba() 函數(shù)來定義顏色結(jié)點(diǎn)。 rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明

徑向漸變是由中心向外漸變的?？梢远x它中心 (默認(rèn)漸變是中心是 center ) 、形狀（圓形或橢圓形）、大小等

其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse

給文字 color 添加漸變效果的話, 可以這樣寫:

CSS 實(shí)現(xiàn)圖片透明度漸變效果

實(shí)現(xiàn)圖片的透明度漸變效果，效果如下：

先說下我的實(shí)現(xiàn)，并沒有用什么黑科技，而是通過兩層圖層堆疊的方式來做的。下面一層就是單純的 svg 圖片，上面覆蓋了一層遮罩，并設(shè)置遮罩的背景色為藍(lán)色到透明色的從左到右漸變。這樣，看上去就是一個(gè)圖片從右到左漸漸變得透明的效果。

這是我比較粗暴的方法，后來在網(wǎng)上看到一種更加優(yōu)雅的方式：

大體上差不多，重點(diǎn)是 CSS 的 background-image 屬性可以設(shè)置多張圖片，用逗號隔開 。因?yàn)槲也恢肋@個(gè)屬性有這個(gè)能力才會(huì)額外加了個(gè)漸變透明圖層來實(shí)現(xiàn)效果。