<tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
    <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
    <em id="fuft6"><acronym id="fuft6"></acronym></em>
          <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>
          首頁技術文章正文

          css3漸變屬性有哪些?css3漸變屬性用法詳解

          更新時間:2021-09-29 來源:黑馬程序員 瀏覽量:

          IT培訓班

          在CSS3之前如果需要添加漸變效果,通常要設置背景圖像來實現。而CSS3中增加了漸變屬性,通過漸變屬性可以輕松實現漸變效果。CSS3的漸變屬性主要包括線性漸變和徑向漸變,下面我們詳細介紹。

          CSS3線性漸變

          在線性漸變過程中,起始顏色會沿著一條直線按順序過渡到結束顏色。運用CSS3中的“background-image: linear-gradient(參數值);”樣式可以實現線性漸變效果,其基本語法格式如下。

          background-image: linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);

          在上面的語法格式中,linear-gradient用于定義漸變方式為線性漸變,括號內用于設定漸變角度和顏色值,具體解釋如下。

          漸變角度

          漸變角度指水平線和漸變線之間的夾角,可以是以deg為單位的角度數值或“to”加“left”“right”“top”和“bottom”等關鍵詞。在使用角度設定漸變起點的時候,0deg對應“to top”,&nbsp;90deg對應“to right”,180deg對應“to bottom”,270deg對應“to left”,整個過程就是以 bottom為起點順時針旋轉,具體如下圖所示。

          顏色值

          顏色值用于設置漸變顏色,其中“顏色值 1”表示起始顏色,“顏色值 n”表示結束顏色,起始顏色和結束顏色之間可以添加多個顏色值,各顏色值之間用“,”隔開。

          下面通過案例來展示: 

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>CSS3線性漸變用法-黑馬程序員web前端開發高手班http://web.itheima.com</title>
              <style>
                  div {
                      width: 200px;
                      height: 200px;
                      /* background-image: linear-gradient(30deg, #0f0, #00F); */
                      background-image: linear-gradient(30deg, #0f0 50%, #00F 80%);
                  }
              </style>
          </head>
          <body>
              <div></div>
          </body>
          </html>

          1632898456571_CSS3線性漸變.jpg

          上面圖中實現了綠色到藍色的線性漸變。值得一提的是,在每一個顏色值后面還可以書寫一個百分比數值,用于標示顏色漸變的位置,具體示例代碼如下:

          background-image: linear-gradient(30deg,#0f0 50%,#00F 80%);

          在上面的示例代碼中,可以看做綠色(#0f0)由50%的位置開始出現漸變至藍色(#00f)位于80%的位置結束漸變??梢杂肞hotoshop中的漸變色塊進行類比,如下圖所示。

          1632898468539_CSS3線性漸變2.jpg

          CSS3徑向漸變

          徑向漸變是網頁中另一種常用的漸變,在徑向漸變過程中,起始顏色會從一個中心點開始,依據橢圓或圓形形狀進行擴張漸變。運用CSS3中的“background-image: radial-gradient(參數值);”樣式可以實現徑向漸變效果,其基本語法格式如下。

          background-image: radial-gradient(漸變形狀 圓心位置,顏色值1,顏色值2...,顏色值n);

          在上面的語法格式中,radial-gradient用于定義漸變的方式為徑向漸變,括號內的參數值用于設定漸變形狀、圓心位置和顏色值,對各參數的具體介紹如下。

          1.漸變形狀

          漸變形狀用來定義徑向漸變的形狀,其取值既可以是定義水平和垂直半徑的像素值或百分比,也可以是相應的關鍵詞。其中關鍵詞主要包括兩個值“circle”和“ellipse”,具體解釋如下。

          ● 像素值/百分比:用于定義形狀的水平和垂直半徑,如“80px 50px”表示一個水平半徑為80px,垂直半徑為50px的橢圓形。

          ● circle:指定圓形的徑向漸變。

          ● ellipse:指定橢圓形的徑向漸變。

          2.圓心位置

          圓心位置用于確定元素漸變的中心位置,使用“at”加上關鍵詞或參數值來定義徑向漸變的中心位置。該屬性值類似于CSS中background-position屬性值,如果省略則默認為“center”。該屬性值主要有以下幾種。

          ● 像素值/百分比:用于定義圓心的水平和垂直坐標,可以為負值。

          ● left:設置左邊為徑向漸變圓心的橫坐標值。

          ● center:設置中間為徑向漸變圓心的橫坐標值或縱坐標。

          ● right:設置右邊為徑向漸變圓心的橫坐標值。

          ● top:設置頂部為徑向漸變圓心的縱標值。

          ● bottom:設置底部為徑向漸變圓心的縱標值。

          3.顏色值

          “顏色值1”表示起始顏色,“顏色值n”表示結束顏色,起始顏色和結束顏色之間可以添加多個顏色值,各顏色值之間用“,”隔開。

          下面運用徑向漸變來制作一個小球

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>CSS3徑向漸變用法-黑馬程序員web前端開發高手班http://web.itheima.com</title>
              <style>
                  div {
                      width: 200px;
                      height: 200px;
                      /* 設置徑向漸變 */
                      background-image: radial-gradient(ellipse at center, #0f0, #030);
                      border-radius: 50%;
                  }
              </style>
          </head>
          <body>
              <div></div>
          </body>
          </html>

          上面案例中為div定義了一個漸變形狀為橢圓形,徑向漸變位置在容器中心點,綠色(#0f0)到深綠色(#030)的徑向漸變;同時使用“border-radius”屬性將容器的邊框設置為圓角。值得一提的是,同“線性漸變”類似,在“徑向漸變”的顏色值后面也可以書寫一個百分比數值,用于設置漸變的位置。

          1632898479432_徑向漸變.jpg

          CSS3重復漸變

          在網頁設計中,經常會遇到在一個背景上重復應用漸變模式的情況,這時就需要使用重復漸變。重復漸變包括重復線性漸變和重復徑向漸變,具體解釋如下。

          1.重復線性漸變

          在CSS3中,通過“background-image: repeating-linear-gradient(參數值);”樣式可以實現重復線性漸變的效果,其基本語法格式如下。

          background-image: repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);

          在上面的語法格式中,“repeating-linear-gradient(參數值)”用于定義漸變方式為重復線性漸變,括號內的參數取值和線性漸變相同,分別用于定義漸變角度和顏色值。

          下面通過一個案例對重復線性漸變進行演示,如下所示。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>CSS3線性漸變用法-黑馬程序員web前端開發高手班http://web.itheima.com</title>
              <style>
                  div {
                      width: 200px;
                      height: 200px;
                      /* background-image: linear-gradient(30deg, #0f0, #00F); */
                      background-image: linear-gradient(30deg, #0f0 50%, #00F 80%);
                  }
              </style>
          </head>
          <body>
              <div></div>
          </body>
          </html>

          為div定義了一個漸變角度為90deg,紅黃綠三色的重復線性漸變,效果如下所示。

          1632898488726_重復漸變.jpg

          2.重復徑向漸變

          在CSS3中,通過“background-image: repeating-radial-gradient(參數值);”樣式可以實現重復線性漸變的效果,其基本語法格式如下。

          background-image: repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);

          在上面的語法格式中,“repeating-radial-gradient(參數值)”用于定義漸變方式為重復徑向漸變,括號內的參數取值和徑向漸變相同,分別用于定義漸變形狀、圓心位置和顏色值。

          下面通過一個案例對重復徑向漸變進行演示

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>CSS3重復徑向漸變用法-黑馬程序員web前端開發高手班http://web.itheima.com</title>
              <style>
                  div {
                      width: 300px;
                      height: 300px;
                      background-image: repeating-radial-gradient(circle at 50% 50%, #E50743, #E8ED30 10%, #3FA62E 15%);
                  }
              </style>
          </head>
          <body>
              <div></div>
          </body>
          </html>
          </html>

          為div定義了一個漸變形狀為圓形,徑向漸變位置在容器中心點,紅、黃、綠三色徑向漸變。

          1632898497305_重復徑向漸變.jpg



          猜你喜歡:

          H5和CSS3的新特性有哪些?

          CSS3盒子模型邊框怎樣實現圓角效果?

          CSS3顏色不透明度的設置方法

          css3屬性選擇器有哪些?css3屬性選擇器介紹

          黑馬程序員HTML&JS+前端高手班

          在線咨詢 我要報名
          和我們在線交談!

          黄色网站片

          <tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
            <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
            <em id="fuft6"><acronym id="fuft6"></acronym></em>
                  <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>