Css漸變gradients深入理解

css漸變(專題)

【目錄】

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

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

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

漸變屬于背景圖片中的一種隅津，所以在css屬性中诬垂，寫==background== 可以寫==background-image== 也可以，下面都是用background來寫伦仍。

線性漸變（linear-gradient）

==特點== ：就是向一個方向進(jìn)行顏色漸變结窘，上/下/左/右/對角線

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

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

==使用== :

第一個參數(shù)（方向，可忽略）

1. 默認(rèn)第一個參數(shù)如果不寫就是從上到下的

background: linear-gradient(hotpink, darkblue);

效果圖：

derection1.png

2. 如果有第一個參數(shù)(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);

derection2.png

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

所有的顏色都是從中心出發(fā)，0deg是to top的方向涝焙，順時針是正卑笨，逆時針是負(fù)

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

效果圖：

derection3.png

第二個參數(shù)（顏色）

1. 可以使用英文字母進(jìn)行顏色控制

   background: linear-gradient(slateblue, cornflowerblue);

效果圖：

color1.png

當(dāng)然如果使用transparent可以看到全透明的效果漸變

   background: linear-gradient(transparent, cornflowerblue);

效果圖：

color7.png

2. 可以使用16進(jìn)制#RRGGBB進(jìn)行顏色控制

background: linear-gradient(#fc466b, #3f5efb);

效果圖：

color2.png

3. 可以使用16進(jìn)制加透明度#RRGGBBAA進(jìn)行顏色控制

? 所謂16進(jìn)制加透明度一般不怎么使用也不推薦使用，為什么不推薦使用呢纱皆？那就是==會帶來比較大的兼容問題== 湾趾，但是有時候不得不用，因為要處理透明度的兼容問題派草。

? 問題在哪里搀缠？

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

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

AA指透明度：00表示全透明瑰步，F(xiàn)F表示完全不透明。

RR指紅色值

GG指綠色值

BB指藍(lán)色值

? ==0~1的透明度如何轉(zhuǎn)化為00-FF的十六進(jìn)制的透明度呢璧眠？==

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

下面把2中的代碼進(jìn)行50%的透明度試試：

background: linear-gradient(#7ffc466b, #7f3f5efb);

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

color6.png

4. 使用rgb/rgba進(jìn)行顏色控制

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*/

效果圖：

color3.png

5. 使用多個顏色控制

只需要在后面加值就好了

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b);

效果圖：

color4.png

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

在顏色后面加百分比缩焦，就可以控制在整個寬度的百分之多少的時候到達(dá)某一個顏色值

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b); 
background: linear-gradient(#3a1c71, #d76d77 20% ,#ffaf7b 70%); 
background: linear-gradient(#3a1c71, #d76d77 80% ,#ffaf7b 90%);

效果圖：

color5.png

線性漸變總寫法

background: linear-gradient(to bottom,#3a1c71, #d76d77 80% ,#ffaf7b 90%);

徑向漸變（radial-gradient）

==特點== ：就是一個中心點向外圍進(jìn)行顏色漸變

==要素== ：方向读虏，形狀，大小袁滥，顏色（起始盖桥，終止，中間色）

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

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

第一個參數(shù)中的第一個參數(shù)（半徑题翻，可忽略）

1. 第一個參數(shù)不寫就默認(rèn)從中間開始揩徊，樣式為圓形

background: radial-gradient(hotpink, darkblue);

效果圖：

dc1.png

2. 如果傳一個值半徑

background: radial-gradient(300px,hotpink, darkblue);
background: radial-gradient(200px,hotpink, darkblue);

====

效果圖：

size2.png

3 .如果傳兩個半徑值

==傳兩個值默認(rèn)為橢圓，一個是橫向的長度嵌赠，一個是縱向的長度==

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

效果圖：

size3.png

4. 如果傳關(guān)鍵字(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);

效果圖：

sizec2.png

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

效果圖：

sizec3.png

第一個參數(shù)中的二個參數(shù)（形狀塑荒，可忽略）

1. 如果只參數(shù)shape（circle,ellipse）

==如果div是正方形那么circle和ellipse并沒有什么區(qū)別，但是如果是長方形猾普，那么ellipse就會根據(jù)長度進(jìn)行壓縮==

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

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

circle1.png

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

效果圖：

size1.png

第一個參數(shù)中的第三個參數(shù)（方向乌助，可忽略）

1. 如果第一個有參數(shù)(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);

效果圖：

dc2.png

2. 如果方向為具體數(shù)值確定圓心

==可以是正數(shù)也可以是負(fù)數(shù)，可以超出范圍==

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

效果圖：

dc3.png

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

==可以是整數(shù)也可以是負(fù)數(shù)他托，可以超出范圍掖肋，方向和上面的一樣==

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

效果圖：

dc4.png

第二個參數(shù)（顏色）

顏色在線性漸變中已經(jīng)討論過，徑向漸變與線性漸變等同赏参。這里只闡述不同的部分：

只是徑向漸變再算百分比的時候志笼，顏色過渡是從內(nèi)而外進(jìn)行的

background: radial-gradient(#ffaf7b, #d76d77,#3a1c71); 
background: radial-gradient(#ffaf7b, #d76d77 20% ,#3a1c71 70%); 
background: radial-gradient(#ffaf7b, #d76d77 80% ,#3a1c71 90%);

效果圖：

color8.png

徑向漸變總寫法

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%);

效果圖：

all.png

兼容問題

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

第一步只需要添加私有前綴就可以解決纫溃。

==注意標(biāo)準(zhǔn)語法要寫在最下面，帶有私有前綴的就不加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); /* 標(biāo)準(zhǔn)的語法 */
/*徑向漸變*/
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); /* 標(biāo)準(zhǔn)的語法 */

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

==解決辦法就是使用IE私有的漸變?yōu)V鏡==

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=hotpink,endcolorstr=darkblue,gradientType=1);
/**
@ 第一個參數(shù)：startcolorstr 表示起始顏色（英文字母 or 十六進(jìn)制）
@ 第二個參數(shù)：endcolorstr 表示終止顏色（英文字母 or 十六進(jìn)制）
@ 第三個參數(shù)：gradientType 表示方向（1為橫向漸變疗锐，0為縱向漸變）
*/

如果想有白透明的效果坊谁，就使用8字符的十六進(jìn)制表示法，在上面也提到了滑臊，規(guī)則是==#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)); /* 標(biāo)準(zhǔn)的語法 */
background: -o-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標(biāo)準(zhǔn)的語法 */
background: -moz-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標(biāo)準(zhǔn)的語法 */
background: linear-gradient(to right, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 標(biāo)準(zhǔn)的語法 */

效果圖：

jianrong1.jpg

特殊效果

進(jìn)度條動畫

效果是什么樣的口芍？截圖：

jindutiao.png

分析：設(shè)置顏色漸變的角度、顏色和范圍雇卷。然后設(shè)置從左到右的動畫鬓椭。

實現(xiàn)：

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

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

@keyframes move{
  0%{
    
  }
  100%{
    background-position:100px;  /*終止?fàn)顟B(tài)是移動到100px像素的位置膘融，然后下一秒又開始從0px開始運動*/
  }
}


<div class="load"></div>

立體小球

效果圖：

ball.png

分析：背景色設(shè)置一個芙粱，漸變是黑色的透明到不透明的漸變，外面的輪廓是圓氧映。

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>

參考

再說線性漸變

再說徑向漸變

version1.0 —— 2018/4/20，首次創(chuàng)建Css漸變gradients深入理解
?burning_韻七七

最后編輯于：2018.04.24 15:50:52

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末岛都，一起剝皮案震驚了整個濱河市律姨，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌臼疫，老刑警劉巖择份，帶你破解...
沈念sama閱讀 211,884評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異烫堤，居然都是意外死亡荣赶，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,347評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門鸽斟，熙熙樓的掌柜王于貴愁眉苦臉地迎上來拔创，“玉大人，你說我怎么就攤上這事富蓄∈Ｔ铮” “怎么了？”我有些...
開封第一講書人閱讀 157,435評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵立倍，是天一觀的道長灭红。經(jīng)常有香客問我，道長口注，這世上最難降的妖魔是什么变擒？我笑而不...
開封第一講書人閱讀 56,509評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮疆导，結(jié)果婚禮上赁项，老公的妹妹穿的比我還像新娘。我一直安慰自己澈段，他們只是感情好悠菜，可當(dāng)我...
茶點故事閱讀 65,611評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著败富，像睡著了一般悔醋。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上兽叮，一...
開封第一講書人閱讀 49,837評論 1贊 290
城市分裂傳說
那天芬骄，我揣著相機(jī)與錄音猾愿，去河邊找鬼。笑死账阻，一個胖子當(dāng)著我的面吹牛蒂秘，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播淘太，決...
沈念sama閱讀 38,987評論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼姻僧，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了蒲牧？” 一聲冷哼從身側(cè)響起撇贺，我...
開封第一講書人閱讀 37,730評論 0贊 267
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎冰抢，沒想到半個月后松嘶，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,194評論 1贊 303
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡挎扰，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,525評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年翠订，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鼓鲁。...
茶點故事閱讀 38,664評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡蕴轨，死狀恐怖港谊，靈堂內(nèi)的尸體忽然破棺而出骇吭，到底是詐尸還是另有隱情，我是刑警寧澤歧寺，帶...
沈念sama閱讀 34,334評論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布燥狰，位于F島的核電站，受9級特大地震影響斜筐，放射性物質(zhì)發(fā)生泄漏龙致。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,944評論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一顷链、第九天我趴在偏房一處隱蔽的房頂上張望目代。院中可真熱鬧，春花似錦嗤练、人聲如沸榛了。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,764評論 0贊 21
一樁弒父案煞抬，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽霜大。三九已至，卻和暖如春革答，著一層夾襖步出監(jiān)牢的瞬間战坤，已是汗流浹背曙强。一陣腳步聲響...
開封第一講書人閱讀 31,997評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留途茫，地道東北人碟嘴。一個月前我還...
沈念sama閱讀 46,389評論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長得像囊卜，于是被迫代替她去往敵國和親臀防。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,554評論 2贊 349

Css漸變gradients深入理解

css漸變(專題)

線性漸變（linear-gradient）

第一個參數(shù)（方向，可忽略）

1. 默認(rèn)第一個參數(shù)如果不寫就是從上到下的

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

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

第二個參數(shù)（顏色）

1. 可以使用英文字母進(jìn)行顏色控制

2. 可以使用16進(jìn)制#RRGGBB進(jìn)行顏色控制

3. 可以使用16進(jìn)制加透明度#RRGGBBAA進(jìn)行顏色控制

4. 使用rgb/rgba進(jìn)行顏色控制

5. 使用多個顏色控制

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

線性漸變總寫法

徑向漸變（radial-gradient）

第一個參數(shù)中的第一個參數(shù)（半徑题翻，可忽略）

1. 第一個參數(shù)不寫就默認(rèn)從中間開始揩徊，樣式為圓形

2. 如果傳一個值半徑

3 .如果傳兩個半徑值

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

4.1 如果是圓形

4. 2 如果是橢圓

第一個參數(shù)中的二個參數(shù)（形狀塑荒，可忽略）

1. 如果只參數(shù)shape（circle,ellipse）

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

第一個參數(shù)中的第三個參數(shù)（方向乌助，可忽略）

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

2. 如果方向為具體數(shù)值確定圓心

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

第二個參數(shù)（顏色）

徑向漸變總寫法

兼容問題

特殊效果

進(jìn)度條動畫

立體小球

參考

推薦閱讀更多精彩內(nèi)容