如何使用css3給圖片實現(xiàn)漸變效果

小編給大家分享一下如何使用css3給圖片實現(xiàn)漸變效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在礦區(qū)等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站建設、成都做網(wǎng)站 網(wǎng)站設計制作定制網(wǎng)站開發(fā),公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站設計,全網(wǎng)整合營銷推廣,成都外貿(mào)網(wǎng)站建設公司,礦區(qū)網(wǎng)站建設費用合理。

瀏覽器支持情況

IE	FF	Chrome	Safari	Opera	iOS	Android	Android Chrome
6-9(no)	2-3.5(no)	4-9(部分-webkit-)	3.1-3.2(no)	-	3.2-4.3(部分)	2.1-3.0(-webkit-)	10-25(-webkit-)
10+	3.6-15(-webkit-)	10-25(-webkit-)	4-5(部分)5-6.1(-webkit-)	-	5+	4-4.3(-webkit-)	26+
-	15+	25+	5-6	15+	-	4.4+	-

線性漸變 linear-gradient

使用語法

linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);

以下代碼都可以運行，執(zhí)行的結果一樣

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

可以定義角度，起始方向，顏色，以及顏色占比

demo

<div style="width: 200px; height: 200px;"></div>
<style>
  div {
    background: linear-gradient(
      to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
</style>

填充試線性漸變 repeating-linear-gradient

用法和 linear-gradient 差不多，其實就是漸變的一個填充。可以精確到像素，比如實現(xiàn)一個斑馬紋

<div class="g"></div>
<style>
  .g {
    background: repeating-linear-gradient(
      -45deg,
      transprent,
      transprent 25px,
      #fff 25px,
      #fff50px
    );
  }
</style>

徑向漸變 radial-gradient

使用語法

radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )

以下代碼執(zhí)行結果一樣

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

可以通過length 來快速定位形狀的位置closest-side 漸變的邊緣形狀與容器距離漸變中心點最近的一邊相切（圓形）或者至少與距離漸變中心點最近的垂直和水平邊相切（橢圓）。

closest-corner 漸變的邊緣形狀與容器距離漸變中心點最近的一個角相交。

farthest-side 與 closest-side 相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊）。

farthest-corner 漸變的邊緣形狀與容器距離漸變中心點最遠的一個角相交。

可以通過at 來快速制定圓心的位置circle at left top圓心在左上角

• circle at right top圓心在右上角

• circle at left bottom 圓心在左下角

• circle at right bottom 圓心在右下角

• circle at center | at 50% 圓心在正中間

代碼示例

<style>
  div {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    border: 1px solid #ddd;
  }
  .g1 {
    background: radial-gradient(circle at center, #f00, #ff0, #080);
  }
  .g2 {
    background: radial-gradient(circle closest-side, #f00, #ff0, #080);
  }
  .g3 {
    background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
  }
  .g4 {
    background: radial-gradient(at top right, #f00, #ff0, #080);
  }
  .g5 {
    background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
  }
  .g6 {
    background: radial-gradient(
        farthest-side at top right,
        #f00,
        #ff0,
        #080,
        transparent
      ), radial-gradient(60px at top left, #f00, #ff0, #080);
  }
</style>
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
<div class="g4"></div>
<div class="g5"></div>
<div class="g6"></div>

得到如下

填充式徑向漸變repeating-radial-gradient

這個和 repeating-linear-gradient 使用差不多，就是對漸變的填充。

代碼示例

<style>
  div {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    float: left;
    margin: 10px;
  }
  .g1 {
    background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%);
  }
  .g2 {
    background: repeating-radial-gradient(
      at top left,
      #f00,
      #ff0 10%,
      #080 15%,
      #ff0 20%,
      #f00 25%
    );
  }
  .g3 {
    background: repeating-radial-gradient(
      circle closest-corner at 20px 50px,
      #f00,
      #ff0 10%,
      #080 20%,
      #ff0 30%,
      #f00 40%
    );
  }
</style>

<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>

以上是“如何使用css3給圖片實現(xiàn)漸變效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：如何使用css3給圖片實現(xiàn)漸變效果
文章起源：http://bm7419.com/article4/iidcoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站設計、用戶體驗、品牌網(wǎng)站建設、網(wǎng)站設計、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)