淺探css3漸變

lieeps 發(fā)布于2019-08-29 17:17 / 2091人閱讀

摘要：基本用法想要知道線性漸變有什么用，當(dāng)然要先學(xué)習(xí)它的屬性和用法。下面我們先一起學(xué)習(xí)一下線性漸變的屬性。函數(shù)的第一個(gè)參數(shù)是角度或者方向，第二個(gè)參數(shù)是截止顏色的值，要想產(chǎn)生漸變的效果，當(dāng)然至少要兩個(gè)或者兩個(gè)以上的顏色值。

css3的漸變屬性已經(jīng)在各種網(wǎng)頁設(shè)計(jì)中被廣泛使用，在沒有css3的漸變屬性之前，要實(shí)現(xiàn)一些多種顏色切換的效果圖，你可能別無他法，只能用一個(gè)圖片來顯示，雖然你知道使用圖片需要網(wǎng)絡(luò)請(qǐng)求，既耗帶寬又耗時(shí)間，下面我將介紹用css3的漸變來改善這一問題。

linear-gradient 基本用法

想要知道線性漸變有什么用，當(dāng)然要先學(xué)習(xí)它的屬性和用法。下面我們先一起學(xué)習(xí)一下線性漸變的屬性。
linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);
linear-gradient函數(shù)的第一個(gè)參數(shù)是角度或者方向，第二個(gè)參數(shù)是截止顏色的值，要想產(chǎn)生漸變的效果，當(dāng)然至少要兩個(gè)或者兩個(gè)以上的顏色值。先來看一個(gè)簡(jiǎn)單的例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(white, gray);
}

如上圖所示，創(chuàng)建一個(gè)100*100的方塊，從上到到下線性漸變，又白色過渡到灰色，linear-gradient不傳位置參數(shù)時(shí)默認(rèn)從頂部到底部進(jìn)行線性漸變，下面來看一個(gè)有位置信息的漸變例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, white, gray);
}

位置信息的傳遞由to關(guān)鍵加上位置，表示向什么方向進(jìn)行顏色漸變，上面表示由左向右進(jìn)行顏色漸變，那想向右上角漸變?cè)趺崔k呢？很簡(jiǎn)單，linear-gradient(to right top, white, gray)就可以了，那傳入角度又是怎么線性漸變的呢？來看個(gè)例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, white, gray);
}

這個(gè)角度指的是什么呢？新標(biāo)準(zhǔn)中將0deg指向北方，并且順時(shí)針增加，因此在上圖當(dāng)傳入角度為0deg時(shí)，由下而上進(jìn)行漸變。

有的時(shí)候你可能不想從一開始就出現(xiàn)漸變，想在某個(gè)指定的位置開始漸變，這該怎么辦呢？來看個(gè)例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, red, red 80%, gray);
}

我們?cè)谙Ｍ荻乳_始的地方的地方加個(gè)同樣色值的顏色中間點(diǎn)，就像上面那樣，在80%的位置開始漸變

repeating-linear-gradient

這又是個(gè)什么函數(shù)？這個(gè)函數(shù)的用法參數(shù)和linear-gradient一摸一樣，但是它會(huì)在所以方向上重復(fù)漸變以覆蓋其整個(gè)容器。不懂什么意思？來看個(gè)例子就明白了：

div {
  width: 100px;
  height: 100px;
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

看了例子是不是就一目了然了，在7%的位置開始漸變，漸變到10%的位置，然后重復(fù)

簡(jiǎn)單用法（方格文圖案）

話不多說直接上例子：

上面的方案文圖案是怎么實(shí)現(xiàn)的呢？來看具體樣式：

div {
  width: 100px;
  height: 100px;
  background: white;
  background-image:
          linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0),
          linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0);
  background-size: 30px 30px;
}

代碼是不是很簡(jiǎn)單呢？實(shí)際上就是利用的background-image屬性先豎話30*30的格子，像右漸變，在50%的地方漸變到透明色，然后在橫畫，向下漸變，在50%的地方漸變到透明色，再疊加，是不是很簡(jiǎn)單呢？趕緊自己去試試吧！

radial-gradient 基本用法

徑向漸變用來展示由原點(diǎn)（漸變中心）輻射開的顏色漸變。我們先來看一下radial-gradient的基本語法：
radial-gradient( [ circle || ] [ at ]? ,
| [ ellipse || [ | ]{2}] [ at ]? ,
| [ [ circle | ellipse ] || ] [ at ]? ,
| at ,
[ , ]+ )

position：與background-position或者transform-origin的取值類似，如果沒有，取中心點(diǎn)

shape：漸變的形狀，取值為circle或者ellipse，默認(rèn)為ellipse

color-stop：表示某個(gè)確定位置的固定色值，包含一個(gè)值加上可選的位置值

extent-keyword：用于描述邊緣輪廓的具體位置，它的取值：closest-side(漸變中心距離容器最近的邊作為終止位置)、closest-corner(漸變中心距離容器最近的角作為終止位置)、farthest-side(漸變中心距離容器最遠(yuǎn)的邊作為終止位置)、farthest-corner(漸變中心距離容器最遠(yuǎn)的角作為終止位置)

介紹了基本的概念之后，讓我們來看一個(gè)例子：

div {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(red, green);
}

上面例子是最簡(jiǎn)單的徑向漸變，所有的取值都是默認(rèn)值，漸變中心默認(rèn)為容器中心，漸變的形狀為圓形

漸變終止位置

接下來讓我們兩個(gè)稍微復(fù)雜一點(diǎn)的例子，指定漸變中心和漸變終止位置：

div {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(closest-side circle at 30px 30px, red, green);
}

漸變的起始位置(30, 30)，終止位置位于距離容器最近的邊，再來看一個(gè)對(duì)比的例子，當(dāng)終止位置位于距離漸變中心最遠(yuǎn)的邊時(shí)：

div {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(farthest-side circle at 30px 30px, red, green);
}

多顏色漸變

下面讓我們?cè)偌狱c(diǎn)料，加上第三種顏色，并且指定漸變位置：

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: radial-gradient(closest-side circle at 50px 50px, red 20%, green 80%, white);
}

橢圓的徑向漸變

上面都是用圓形漸變介紹了漸變用法，接下來簡(jiǎn)單介紹一下橢圓的徑向漸變，來看一個(gè)簡(jiǎn)單例子

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: radial-gradient(ellipse 40px 20px, red, green, white);
}

和圓形漸變有點(diǎn)不一樣的地方就在于圓形漸變?cè)O(shè)置的是圓的半徑，而橢圓漸變?cè)O(shè)置的橢圓的橫軸半徑和縱軸半徑

repeating-radial-gradient

repeating-radial-gradient創(chuàng)建一個(gè)原點(diǎn)輻射的重復(fù)漸變的圖形，和radial-gradient采用的是同樣的參數(shù)，下面讓我們通過一個(gè)例子看一下兩者之間的差別：

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: repeating-radial-gradient(ellipse 40px 20px, red, green, white);
}

簡(jiǎn)單應(yīng)用

div {
  width: 200px;
  height: 100px;
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0),
  radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

上面的例子很簡(jiǎn)單的就實(shí)現(xiàn)圓點(diǎn)矩陣，關(guān)鍵就是通過background-position設(shè)置圖層的位置，讓兩個(gè)圖層恰
好互補(bǔ)

總結(jié)

以上對(duì)css3的線性漸變和徑向漸變做了簡(jiǎn)單介紹，想要更好掌握漸變的用法，還是需要更多的實(shí)踐。
這篇文章如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏

云服務(wù)器 GPU云服務(wù)器淺探 css3 css3氣泡 css3動(dòng)畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114222.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lieeps

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

為保護(hù)云數(shù)據(jù)安全亞馬遜/微軟等公司發(fā)布一項(xiàng)新倡議_云安全

閱讀 1160·2021-10-14 09:42
主機(jī)托是什么原因分析-電腦播放動(dòng)畫出現(xiàn)拖影現(xiàn)象是什么原因？

閱讀 1486·2021-09-22 15:11
Css實(shí)現(xiàn)手機(jī)端頁面強(qiáng)制橫屏

閱讀 3388·2019-08-30 15:56
css系列之before或after中content

閱讀 1319·2019-08-30 15:55
vue項(xiàng)目接入微信JSSDK的坑

閱讀 3691·2019-08-30 15:55
CSS顏色相關(guān)總結(jié)

閱讀 939·2019-08-30 15:44
淺探css3漸變

閱讀 2092·2019-08-29 17:17
一個(gè)前端菜鳥的成長(zhǎng)歷程

閱讀 2134·2019-08-29 15:37

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

淺探css3漸變

相關(guān)文章

淺探前端圖片優(yōu)化

淺探前端圖片優(yōu)化

淺探js深拷貝和淺拷貝

淺探webpack優(yōu)化

css3 漸變

發(fā)表評(píng)論

0條評(píng)論

lieeps

男|高級(jí)講師

TA的文章

為保護(hù)云數(shù)據(jù)安全亞馬遜/微軟等公司發(fā)布一項(xiàng)新倡議_云安全

主機(jī)托是什么原因分析-電腦播放動(dòng)畫出現(xiàn)拖影現(xiàn)象是什么原因？

Css實(shí)現(xiàn)手機(jī)端頁面強(qiáng)制橫屏

css系列之before或after中content

vue項(xiàng)目接入微信JSSDK的坑

CSS顏色相關(guān)總結(jié)