Css漸變gradient專題

時間  2019-11-08
標籤 css 漸變 gradient 專題 欄目 CSS 简体版
原文   原文鏈接

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）html

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

漸變屬於背景圖片中的一種，因此在css屬性中，寫==background== 能夠寫==background-image== 也能夠，下面都是用background來寫。web

線性漸變（linear-gradient）

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

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

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

==使用== :spa

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

1. 默認第一個參數若是不寫就是從上到下的

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

效果圖： 3d

derection1.png

2. 若是有第一個參數(top/left/bottom/right)

==若是是原生寫法記得要加to，因此後面的方向正好相反，並且對角線的時候上下和左右能夠互換位置==code

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)進行控制

全部的顏色都是從中心出發，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);
複製代碼

效果圖：

derection3.png

​

第二個參數（顏色）

1. 能夠使用英文字母進行顏色控制

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

效果圖：

color1.png

固然若是使用transparent能夠看到全透明的效果漸變

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

效果圖：

color7.png

2. 能夠使用16進制#RRGGBB進行顏色控制

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

效果圖：

color2.png

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和火狐瀏覽器的效果圖：

color6.png

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*/
複製代碼

效果圖：

color3.png

5. 使用多個顏色控制

只須要在後面加值就行了

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

效果圖：

color4.png

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

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

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）

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

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

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

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

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

1. 第一個參數不寫就默認從中間開始，樣式爲圓形

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

效果圖：

dc1.png

2. 若是傳一個值半徑

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

====

效果圖：

size2.png

3 .若是傳兩個半徑值

==傳兩個值默認爲橢圓，一個是橫向的長度，一個是縱向的長度==

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

效果圖：

size3.png

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);
複製代碼

效果圖：

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

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

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）

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

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

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);
複製代碼

效果圖：

dc2.png

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);
複製代碼

效果圖：

dc3.png

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);
複製代碼

效果圖：

dc4.png

第二個參數（顏色）

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

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

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

兼容問題

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

  1. 第一步只須要添加私有前綴就能夠解決。

    ==注意標準語法要寫在最下面，帶有私有前綴的就不加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); /* 標準的語法 */
複製代碼

  2. 第二步主要針對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)); /* 標準的語法 */
複製代碼

    效果圖：

    jianrong1.jpg

特殊效果

進度條動畫

效果是什麼樣的？截圖：

jindutiao.png

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

實現：

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>
複製代碼

立體小球

效果圖：

ball.png

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

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>
複製代碼

參考

再說線性漸變

再說徑向漸變

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程