淺探css3漸變

lieeps 發布于2019-08-29 17:17 / 2027人閱讀

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

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

linear-gradient 基本用法

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

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

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

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

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

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

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

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

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

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

repeating-linear-gradient

這又是個什么函數？這個函數的用法參數和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%的位置，然后重復

簡單用法（方格文圖案）

話不多說直接上例子：

上面的方案文圖案是怎么實現的呢？來看具體樣式：

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創建一個原點輻射的重復漸變的圖形，和radial-gradient采用的是同樣的參數，下面讓我們通過一個例子看一下兩者之間的差別：

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

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

總結

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114222.html

淺探前端圖片優化

摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...

CocoaChina 2019-08-30 15:54 評論0 收藏0
淺探前端圖片優化

摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...

X1nFLY 2019-08-23 14:14 評論0 收藏0
淺探js深拷貝和淺拷貝

摘要：接下來就讓我們更細致的探究中的深淺拷貝。總結以上對深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實現上也只介紹了最簡單的實現形式，并未考慮復雜情況以及相應優化，想要對深拷貝有更深入的了解，需要大家花時間去深入研究，或者可以關注我后續文章的動態。對象和數組的拷貝對我來說一直都是一個比較模糊的概念，一直有點一知半解，但是在實際工作中又偶爾會涉及到，有時候還會一不小心掉坑里，不知道大家有沒有同樣...

habren 2019-08-23 13:01 評論0 收藏0
淺探webpack優化

摘要：是對的轉譯結果進行緩存，之后的進行構建時，都會去嘗試讀取緩存來避免高耗能的重新轉譯過程，可以指定一個緩存目錄或者指定為，為時將使用默認的緩存目錄。這篇文章如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏由于前端的快速發展，相關工具的發展速度也是相當迅猛，各大框架例如vue,react都有自己優秀的腳手架工具來幫助我們快速啟動一個新項目，也正式因為這個原因，我們對于腳手架...

Achilles 2019-08-23 13:50 評論0 收藏0
css3 漸變

摘要：漸變漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變線性漸變線性漸變為向上，向下，向左，向右兩種漸變方式。線性漸變由一個軸即梯度線構成。 css3ps: css越來越真正的像一門語言了，css已經有變量了，剛剛看到文檔中。一個實驗性質的功能。漸變漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變線性漸變線性漸變為向上，向下，向左，向右兩種漸變方式。 linear-gradient...

FrozenMap 2019-08-29 16:20 評論0 收藏0