淺探css3漸變

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

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

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

linear-gradient 基本用法

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

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

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

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

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

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

這個角度指的是什么呢？新標準中將0deg指向北方，并且順時針增加，因此在上圖當傳入角度為0deg時，由下而上進行漸變。

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

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

我們在希望梯度開始的地方的地方加個同樣色值的顏色中間點，就像上面那樣，在80%的位置開始漸變

repeating-linear-gradient

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

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%的位置，然后重復

簡單用法（方格文圖案）

話不多說直接上例子：

上面的方案文圖案是怎么實現(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;
}

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

radial-gradient 基本用法

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

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

shape：漸變的形狀，取值為circle或者ellipse，默認為ellipse

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

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

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

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

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

漸變終止位置

接下來讓我們兩個稍微復雜一點的例子，指定漸變中心和漸變終止位置：

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

漸變的起始位置(30, 30)，終止位置位于距離容器最近的邊，再來看一個對比的例子，當終止位置位于距離漸變中心最遠的邊時：

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

多顏色漸變

下面讓我們再加點料，加上第三種顏色，并且指定漸變位置：

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

橢圓的徑向漸變

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

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

和圓形漸變有點不一樣的地方就在于圓形漸變設置的是圓的半徑，而橢圓漸變設置的橢圓的橫軸半徑和縱軸半徑

repeating-radial-gradient

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

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

簡單應用

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;
}

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

總結(jié)

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

GPU云服務器云服務器淺探 css3 css3氣泡 css3動畫

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114222.html

發(fā)表評論

登陸后可評論

0條評論

lieeps

男|高級講師

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

TA的文章

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

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

閱讀 1391·2021-09-22 15:11
Css實現(xiàn)手機端頁面強制橫屏

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

閱讀 1263·2019-08-30 15:55
vue項目接入微信JSSDK的坑

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

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

閱讀 2037·2019-08-29 17:17
一個前端菜鳥的成長歷程

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

淺探css3漸變

相關(guān)文章

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

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

淺探js深拷貝和淺拷貝

淺探webpack優(yōu)化

css3 漸變

發(fā)表評論

0條評論

lieeps

男|高級講師

TA的文章

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

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

Css實現(xiàn)手機端頁面強制橫屏

css系列之before或after中content

vue項目接入微信JSSDK的坑

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