Css漸變gradient專題

a1burning發表於2018-04-20

CSS

css漸變(專題)

【目錄】

css漸變(專題)
- 線性漸變（linear-gradient）
  - 第一個引數（方向，可忽略）
    - 1. 預設第一個引數如果不寫就是從上到下的
    - 2. 如果有第一個引數(top/left/bottom/right)
    - 3. 使用角度也可以angle(角度值deg)進行控制
  - 第二個引數（顏色）
    - 1. 可以使用英文字母進行顏色控制
    - 2. 可以使用16進位制#RRGGBB進行顏色控制
    - 3. 可以使用16進位制加透明度#RRGGBBAA進行顏色控制
    - 4. 使用rgb/rgba進行顏色控制
    - 5. 使用多個顏色控制
    - 6. 使用多個有指定範圍的顏色控制
  - 線性漸變總寫法
- 徑向漸變（radial-gradient）
  - 第一個引數中的第一個引數（半徑，可忽略）
    - 1. 第一個引數不寫就預設從中間開始，樣式為圓形
    - 2. 如果傳一個值半徑
    - 3 .如果傳兩個半徑值
    - 4. 如果傳關鍵字(closest-side/closest-corner/farthest-side/farthest-corner)
      - 4.1 如果是圓形
      - 4.2 如果是橢圓
  - 第一個引數中的二個引數（形狀，可忽略）
    - 1. 如果只引數shape（circle,ellipse）
    - 2. 如果是加上長度範圍和形狀
  - 第一個引數中的第三個引數（方向，可忽略）
    - 1. 如果第一個有引數(center/top/bottom/left/right)
    - 2. 如果方向為具體數值確定圓心
    - 3. 如果方向為百分比確定圓心
  - 第二個引數（顏色）
  - 徑向漸變總寫法
- 相容問題
- 特殊效果
  - 進度條
  - 動畫立體小球
- 參考

css3定義了兩種漸變：**線性漸變（Linear Gradients）**or 徑向漸變（Radial Gradients）

而這個屬性只有IE10以上才相容，完了我們討論一下漸變的相容問題。

漸變屬於背景圖片中的一種，所以在css屬性中，寫==background== 可以寫==background-image== 也可以，下面都是用background來寫。

線性漸變（linear-gradient）

==特點== ：就是向一個方向進行顏色漸變，上/下/左/右/對角線

==要素== ：方向，顏色（起始，終止，中間色）

==語法== ：background: linear-gradient(to direction, color-start, color-stop1, ... , color-end);

==使用== :

第一個引數（方向，可忽略）

1. 預設第一個引數如果不寫就是從上到下的

background: linear-gradient(hotpink, darkblue);
複製程式碼

效果圖：

2. 如果有第一個引數(top/left/bottom/right)

==如果是原生寫法記得要加to，所以後面的方向正好相反，而且對角線的時候上下和左右可以互換位置==

to bottom(從上邊開始)

to right(從左邊開始)

to left(從右邊開始)

to top(從下邊開始)

to top left(從右下角開始)

to top right(從左下角開始)

to bottom left(從右上角開始)

to bottom right(從右下角開始)

background: linear-gradient(to bottom,hotpink, darkblue);
background: linear-gradient(to right,hotpink, darkblue);
background: linear-gradient(to left,hotpink, darkblue);
background: linear-gradient(to top,hotpink, darkblue); 
background: linear-gradient(to right bottom,hotpink, darkblue); 
background: linear-gradient(to top right,hotpink, darkblue);
background: linear-gradient(to left bottom,hotpink, darkblue);
background: linear-gradient(to top left,hotpink, darkblue);
複製程式碼

3. 使用角度也可以angle(角度值deg)進行控制

所有的顏色都是從中心出發，0deg是to top的方向，順時針是正，逆時針是負

0deg / 360deg （從下到上）

90deg （從左到右）

180deg （從上到下）

270deg / -90deg （從右到左）

45deg （對角線左下到右上）

background: linear-gradient(0deg,#fc466b, #3f5efb);
background: linear-gradient(90deg,#fc466b, #3f5efb);
background: linear-gradient(180deg,#fc466b, #3f5efb);
background: linear-gradient(270deg,#fc466b, #3f5efb);
background: linear-gradient(360deg,#fc466b, #3f5efb);
background: linear-gradient(-90deg,#fc466b, #3f5efb);
background: linear-gradient(-180deg,#fc466b, #3f5efb);
background: linear-gradient(45deg,#fc466b, #3f5efb);
複製程式碼

效果圖：

第二個引數（顏色）

1. 可以使用英文字母進行顏色控制

   background: linear-gradient(slateblue, cornflowerblue);
複製程式碼

效果圖：

當然如果使用transparent可以看到全透明的效果漸變

   background: linear-gradient(transparent, cornflowerblue);
複製程式碼

效果圖：

2. 可以使用16進位制#RRGGBB進行顏色控制

background: linear-gradient(#fc466b, #3f5efb);
複製程式碼

效果圖：

3. 可以使用16進位制加透明度#RRGGBBAA進行顏色控制

所謂16進位制加透明度一般不怎麼使用也不推薦使用，為什麼不推薦使用呢？那就是==會帶來比較大的相容問題== ，但是有時候不得不用，因為要處理透明度的相容問題。

問題在哪裡？

Chrome和火狐瀏覽器是支援的，形式是==#rrggbbaa== 但是這種形式在IE中就是不支援的。

IE瀏覽器是什麼情況呢？IE9以下如果加透明度是按照==#aarrggbb== 的形式來的，但是這種形式IE10和IE11都是不支援的，所以用這個辦法，IE10和IE11都出不來。所以==不推薦使用== 。

AA指透明度：00表示全透明，FF表示完全不透明。

RR指紅色值

GG指綠色值

BB指藍色值

==0~1的透明度如何轉化為00-FF的十六進位制的透明度呢？==

Math.round(256 * opacity).toString(16)

下面把2中的程式碼進行50%的透明度試試：

background: linear-gradient(#7ffc466b, #7f3f5efb);
複製程式碼

下面是Chrome和火狐瀏覽器的效果圖：

4. 使用rgb/rgba進行顏色控制

background: linear-gradient(rgb(255,237,188), rgb(237,66,100));   /*rbg*/
background: linear-gradient(rgb(255,237,188,.5), rgb(237,66,100,.5));  /*rgba*/
複製程式碼

效果圖：

5. 使用多個顏色控制

只需要在後面加值就好了

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b);
複製程式碼

效果圖：

6. 使用多個有指定範圍的顏色控制

在顏色後面加百分比，就可以控制在整個寬度的百分之多少的時候到達某一個顏色值

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b); 
background: linear-gradient(#3a1c71, #d76d77 20% ,#ffaf7b 70%); 
background: linear-gradient(#3a1c71, #d76d77 80% ,#ffaf7b 90%); 
複製程式碼

效果圖：

線性漸變總寫法

background: linear-gradient(to bottom,#3a1c71, #d76d77 80% ,#ffaf7b 90%); 
複製程式碼

徑向漸變（radial-gradient）

==特點== ：就是一箇中心點向外圍進行顏色漸變

==要素== ：方向，形狀，大小，顏色（起始，終止，中間色）

==語法== ：background: radial-gradient(size shape at position,start-color, ..., last-color);

==使用== : ==都是使用200px * 200px的div==

第一個引數中的第一個引數（半徑，可忽略）

1. 第一個引數不寫就預設從中間開始，樣式為圓形

background: radial-gradient(hotpink, darkblue);
複製程式碼

效果圖：

2. 如果傳一個值半徑

background: radial-gradient(300px,hotpink, darkblue);
background: radial-gradient(200px,hotpink, darkblue);
複製程式碼

====

效果圖：

3 .如果傳兩個半徑值

==傳兩個值預設為橢圓，一個是橫向的長度，一個是縱向的長度==

background: radial-gradient(200px 50px,hotpink, darkblue);
background: radial-gradient(50px 100px,hotpink, darkblue);
複製程式碼

效果圖：

4. 如果傳關鍵字(closest-side/closest-corner/farthest-side/farthest-corner)

==這個大小是由位置決定的==

4.1 如果是圓形

/*closest-side*/
background: radial-gradient(closest-side,#ffaf7b, #d76d77 ,#3a1c71);
/*40%只寫一個表示40% 50%*/
background: radial-gradient(closest-side circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);  
background: radial-gradient(closest-side circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*closest-corner*/
background: radial-gradient(closest-corner,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-side*/
background: radial-gradient(farthest-side,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-corner*/
background: radial-gradient(farthest-corner,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
複製程式碼

效果圖：

4. 2 如果是橢圓

/*closest-side*/
background: radial-gradient(closest-side ellipse,#ffaf7b, #d76d77 ,#3a1c71);
/*40%只寫一個表示40% 50%*/
background: radial-gradient(closest-side ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);  
background: radial-gradient(closest-side ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*closest-corner*/
background: radial-gradient(closest-corner ellipse,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-side*/
background: radial-gradient(farthest-side ellipse,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-corner*/
background: radial-gradient(farthest-corner ellipse,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
複製程式碼

效果圖：

第一個引數中的二個引數（形狀，可忽略）

1. 如果只引數shape（circle,ellipse）

==如果div是正方形那麼circle和ellipse並沒有什麼區別，但是如果是長方形，那麼ellipse就會根據長度進行壓縮==

background: radial-gradient(circle,hotpink, darkblue); /*下圖1和3*/
background: radial-gradient(ellipse,hotpink, darkblue); /*下圖2和4*/
複製程式碼

效果圖（左邊兩個是200px * 200px ，右邊兩個是200px *100px）

2. 如果是加上長度範圍和形狀

==該範例要說明半徑要寫到形狀前面，且半徑作用大於形狀==

background: radial-gradient(300px circle,hotpink, darkblue);
background: radial-gradient(200px circle,hotpink, darkblue);
background: radial-gradient(100px circle,hotpink, darkblue);
background: radial-gradient(50px circle,hotpink, darkblue);
background: radial-gradient(0px circle,hotpink, darkblue);

/*如果這裡加了長短軸的尺寸後面又寫了circle，那麼circle是不起作用的，出來還是一個橢圓*/
background: radial-gradient(200px 50px ellipse,hotpink, darkblue);
複製程式碼

效果圖：

第一個引數中的第三個引數（方向，可忽略）

1. 如果第一個有引數(center/top/bottom/left/right)

==如果是原生寫法記得要加at，而且對角線的時候上下和左右可以互換位置==

background: radial-gradient(at center,hotpink, darkblue);
background: radial-gradient(at top,hotpink, darkblue);
background: radial-gradient(at bottom,hotpink, darkblue);
background: radial-gradient(at left,hotpink, darkblue);
background: radial-gradient(at right,hotpink, darkblue);
background: radial-gradient(at center center,hotpink, darkblue);
background: radial-gradient(at top left,hotpink, darkblue);
background: radial-gradient(at top right,hotpink, darkblue);
background: radial-gradient(at bottom right,hotpink, darkblue);
background: radial-gradient(at bottom left,hotpink, darkblue);
複製程式碼

效果圖：

2. 如果方向為具體數值確定圓心

==可以是正數也可以是負數，可以超出範圍==

background: radial-gradient(circle at 0 0,hotpink, darkblue);
background: radial-gradient(circle at 50px 50px,hotpink, darkblue);
background: radial-gradient(circle at 100px 50px,hotpink, darkblue);
background: radial-gradient(circle at 50px 100px,hotpink, darkblue);
background: radial-gradient(circle at 100px 100px,hotpink, darkblue);
複製程式碼

效果圖：

3. 如果方向為百分比確定圓心

==可以是整數也可以是負數，可以超出範圍，方向和上面的一樣==

background: radial-gradient(circle at 0 0,hotpink, darkblue);
background: radial-gradient(circle at 25% 25%,hotpink, darkblue);
background: radial-gradient(circle at -25% 50%,hotpink, darkblue);
background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
background: radial-gradient(circle at 50% 50%,hotpink, darkblue);
複製程式碼

效果圖：

第二個引數（顏色）

顏色線上性漸變中已經討論過，徑向漸變與線性漸變等同。這裡只闡述不同的部分：

只是徑向漸變再算百分比的時候，顏色過渡是從內而外進行的

background: radial-gradient(#ffaf7b, #d76d77,#3a1c71); 
background: radial-gradient(#ffaf7b, #d76d77 20% ,#3a1c71 70%); 
background: radial-gradient(#ffaf7b, #d76d77 80% ,#3a1c71 90%); 
複製程式碼

效果圖：

徑向漸變總寫法

background: radial-gradient(100px circle at 75% 75%,#ffaf7b, #d76d77 20% ,#3a1c71 60%); 
background: radial-gradient(200px 100px ellipse at 25% 25%,#ffaf7b, #d76d77 60% ,#3a1c71 90%); 
複製程式碼

效果圖：

相容問題

所說的相容問題，就是各個瀏覽器的相容性問題。

第一步只需要新增私有字首就可以解決。

==注意標準語法要寫在最下面，帶有私有字首的就不加to了，方向就是起始點==

/*線性漸變*/
background: -webkit-linear-gradient(left, hotpink , darkblue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, hotpink, darkblue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, hotpink, darkblue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, hotpink , darkblue); /* 標準的語法 */
/*徑向漸變*/
background: -webkit-radial-gradient(center, hotpink , darkblue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(center, hotpink, darkblue); /* Opera 11.1 - 12.0 */
background: -moz-radial-gradient(center, hotpink, darkblue); /* Firefox 3.6 - 15 */
background: radial-gradient(at center, hotpink , darkblue); /* 標準的語法 */
複製程式碼

第二步主要針對IE9以下的瀏覽器，是不支援漸變效果的。

==解決辦法就是使用IE私有的漸變濾鏡==

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=hotpink,endcolorstr=darkblue,gradientType=1);
/**
@ 第一個引數：startcolorstr 表示起始顏色（英文字母 or 十六進位制）
@ 第二個引數：endcolorstr 表示終止顏色（英文字母 or 十六進位制）
@ 第三個引數：gradientType 表示方向（1為橫向漸變，0為縱向漸變）
*/
複製程式碼

如果想有白透明的效果，就使用8字元的十六進位制表示法，在上面也提到了，規則是==#AARRBBGG==

所以如果還想要相容IE9以下的瀏覽器就寫成：

/*50%透明度的#fc466b和50%透明度的#3f5efb*/
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7ffc466b,endcolorstr=#7f3f5efb,gradientType=1);/*相容IE9以下*/
background: -webkit-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標準的語法 */
background: -o-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標準的語法 */
background: -moz-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標準的語法 */
background: linear-gradient(to right, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標準的語法 */
複製程式碼

效果圖：

特殊效果

進度條動畫

效果是什麼樣的？截圖：

分析：設定顏色漸變的角度、顏色和範圍。然後設定從左到右的動畫。

實現：

body{
  margin:0;
  padding:0;
  /*為了展示方便就用灰色的背景*/
  background-color:#ccc;  
}

.load{
  width:500px;
  height:100px;
  /*如果漸變出不來，有一個背景顏色*/
  background:#fff;  
  margin:100px auto;
  /*間隔色的關鍵程式碼*/
  background-image:linear-gradient(
  	45deg,
    #fff 0%,
    #fff 25%,
    #000 25%,
    #000 50%,
    #fff 50%,
    #fff 75%,
    #000 75%,
    #000 100%
  );
  /*把剛才的背景壓縮到100px * 100px以內的，沒有設定不重複所以是重複的*/
  background-size: 100px 100px; 
  /*一秒播一次的永動動畫*/
  animation: move 1s linear infinite; 
}

@keyframes move{
  0%{
    
  }
  100%{
    background-position:100px;  /*終止狀態是移動到100px畫素的位置，然後下一秒又開始從0px開始運動*/
  }
}


<div class="load"></div>
複製程式碼

立體小球

效果圖：

分析：背景色設定一個，漸變是黑色的透明到不透明的漸變，外面的輪廓是圓。

body {
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}

.radial-gradient {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border-radius: 100px;
  background-color: hotpink; /*左邊的沒有背景色，右邊的加了背景色*/
  background-image: radial-gradient(
    200px at 50px 60px,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6)
  );
}

<div class="radial-gradient"></div>
複製程式碼

參考

再說線性漸變

再說徑向漸變

css linear-gradient文字漸變
2022-05-04
CSS
CSS radial-gradient()徑向漸變
2018-07-20
CSS
css radial-gradient繪製漸變背景
2022-05-10
CSS
聊一聊CSS3的漸變——gradient
2018-10-14
CSSS3
CSS linear-gradient() 線性漸變
2018-07-20
CSS
CSS神奇的conic-gradient圓錐漸變
2021-09-09
CSS
CSS3 radial-gradient()徑向漸變
2018-07-20
CSSS3
CSS3 linear-gradient() 線性漸變
2018-07-20
CSSS3
css漸變背景的頂級用法：linear-gradient()
2024-11-01
CSS
CSS實現漸變色邊框（Gradient borders）的5種方法
2021-10-11
CSS
CSS背景漸變
2019-04-09
CSS
CSS 背景漸變
2018-05-21
CSS
css 字型漸變
2024-06-21
CSS
10個demo示例學會CSS3 radial-gradient徑向漸變
2019-01-02
CSSS3
css3 漸變
2018-08-09
CSSS3
css3漸變
2018-04-02
CSSS3
css奇技淫巧-色彩漸變與動態漸變
2019-04-19
CSS
CSS3線性漸變和徑向漸變
2017-03-24
CSSS3
【css靈感】漸變字
2021-12-26
CSS
CSS3 背景漸變
2018-05-21
CSSS3
CSS 透明度漸變
2018-05-20
CSS
div css背景漸變效果
2017-02-21
CSS
css背景漸變相容性問題（非原創）
2021-09-09
CSS
CSS 錐形漸變只能畫圓錐嗎？conic-gradient 10大應用舉例
2023-03-26
CSS
學習並使用線性漸變linear-gradient
2019-03-04
css3實現文字線性漸變，css3實現背景漸變
2024-10-24
CSSS3
CSS透明度漸變效果
2018-05-20
CSS
使用 CSS 實現漸變效果
2024-07-11
CSS
網頁影像漸變的方法（HTML+CSS） (漸變與切換)
2024-03-27
網頁HTMLCSS
CSS 傾斜角度線性漸變
2018-07-20
CSS
css3背景顏色漸變
2020-10-12
CSSS3
CSS 顏色漸變的程式碼.
2011-01-06
CSS
CSS實現好看的文字漸變
2024-08-23
CSS
前端技術分享：錐形漸變conic-gradient你瞭解多少？
2021-05-13
前端
純CSS漸變繪製 Chrome 圖示
2023-05-08
CSSChrome
CSS--border邊框顏色漸變
2016-08-29
CSS
css徑向漸變程式碼例項
2017-03-16
CSS
CSS背景色漸變效果程式碼
2017-02-11
CSS

Css漸變gradient專題

css漸變(專題)

線性漸變（linear-gradient）

第一個引數（方向，可忽略）

1. 預設第一個引數如果不寫就是從上到下的

2. 如果有第一個引數(top/left/bottom/right)

3. 使用角度也可以angle(角度值deg)進行控制

第二個引數（顏色）

1. 可以使用英文字母進行顏色控制

2. 可以使用16進位制#RRGGBB進行顏色控制

3. 可以使用16進位制加透明度#RRGGBBAA進行顏色控制

4. 使用rgb/rgba進行顏色控制

5. 使用多個顏色控制

6. 使用多個有指定範圍的顏色控制

線性漸變總寫法

徑向漸變（radial-gradient）

第一個引數中的第一個引數（半徑，可忽略）

1. 第一個引數不寫就預設從中間開始，樣式為圓形

2. 如果傳一個值半徑

3 .如果傳兩個半徑值

4. 如果傳關鍵字(closest-side/closest-corner/farthest-side/farthest-corner)

4.1 如果是圓形

4. 2 如果是橢圓

第一個引數中的二個引數（形狀，可忽略）

1. 如果只引數shape（circle,ellipse）

2. 如果是加上長度範圍和形狀

第一個引數中的第三個引數（方向，可忽略）

1. 如果第一個有引數(center/top/bottom/left/right)

2. 如果方向為具體數值確定圓心

3. 如果方向為百分比確定圓心

第二個引數（顏色）

徑向漸變總寫法

相容問題

特殊效果

進度條動畫

立體小球

參考

相關文章