03-漸變

徑向漸變

與其他漸變相同，徑向漸變是一個不固定尺寸的圖片，譬如，它沒有默認尺寸、比例。具體尺寸由它所定義的元素尺寸決定。

徑向漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。

徑向漸變的中心點至邊緣形狀以及其延伸的部分，由連續縮放的若干同心輪廓組成，這個輪廓由設定的邊緣形狀決定。

• 徑向漸變的中心點至邊緣形狀以及其延伸的部分是由連續縮放的若干同心輪框組成的。
• 顏色結束點用於設定虛擬漸變射線的變化方式，由中心點水平變化至右側。顏色結束點由百分比設定，中心點爲0%，終止點位100%。終止點未漸變射線與邊緣形狀相交點的漸變半徑。
• 漸變的形狀。圓形（漸變的形狀是一個半徑不變的正圓）或橢圓形（軸對稱橢圓） 默認爲橢圓。

使用

• 語法：radial gradient ([<shape>]||<extent-keyword>] [at<position>]?)

  • shape:用來定義徑向漸變的形狀，包含circle(圓形) 和 ellipse(橢圓形)

  • extent-keyword：用於定義徑向漸變的邊緣形狀的位置

    closest-side	漸變的邊緣形狀與容器距離漸變中心點最近的一邊相切（圓形）或者至少與距離漸變中心點最近的垂直和水平邊相切（橢圓）。
    closest-corner	漸變的邊緣形狀與容器距離漸變中心點最近的一個角相交。
    farthest-side	與closest-side相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊）。
    farthest-corner	漸變的邊緣形狀與容器距離漸變中心點最遠的一個角相交。

  • position ：中心點的位置 如缺省，默認爲中心點。

• 創建一個由中心點輻射開的徑向漸變的圖片。

  • 語法：radial gradient(at<position>,<color-stop>[,<color-stop>]+)
    • color-stop:用於定義徑向漸變的顏色終止點。
  • 理解徑向漸變

  html

      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  

  css

      <style type="text/css">
          .c1,.c2,.c3{
              width: 500px;
              height: 200px;
              margin: 50px auto;
          }
          .c1{
              background-image: radial-gradient(yellowgreen,blue);
          }
  
          .c2{
              background-image: radial-gradient(yellowgreen,blue,gold);
          }
  
          .c3{
              background-image: radial-gradient(yellowgreen,blue,gold,peachpuff);
          }
  
      </style>
  

  效果圖

可以看到，第一個顏色會位於中心 最後一個會包裹在外面 中間的值會包裹着中心。這就是 徑向漸變的中心點至邊緣形狀以及其延伸的部分是由連續縮放的若干同心輪框組成的。

• 上面的我們直接設置了顏色的值沒由給他設定位置 ，也就是顏色結束點用於設定虛擬漸變射線的變化方式，由中心點水平變化至右側。顏色結束點由百分比設定，中心點爲0%，終止點位100%。終止點未漸變射線與邊緣形狀相交點的漸變半徑。 上面的這句話。 雖然我們沒有給他設置位置，但是瀏覽器自動給我們分配了位置。下面我們來給漸變設定位置。

  html

      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  

  css

      <style type="text/css">
          .c1,.c2,.c3{
              width: 500px;
              height: 200px;
              margin: 50px auto;
          }
          .c1{
              background-image: radial-gradient(yellowgreen 0%,blue 20%);
          }
  
          .c2{
              background-image: radial-gradient(yellowgreen 20%,blue);
          }
  
          .c3{
              background-image: radial-gradient(yellowgreen 40%,blue);
          }
  
      </style>
  

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4XgRqXIy-1593010659646)(C:\Users\84411\Desktop\學習筆記\學習筆記-css3\imgs\08.png)]

  可以看到我們給中心顏色設置的值讓其逐漸變大 ，中心的大小也隨機變大。

• 反之我們給最後以一個顏色設置，可以得到

• 設置變換橢圓 radial gradient ([<shape>]||<extent-keyword>] [at<position>]?)

  • shape 默認是橢圓 但長寬相同時就時

    • circle - 圓
    • ellipse -橢圓

            .c3{
                background-image: radial-gradient(circle ,yellowgreen ,blue 40%);
            }
    

• 除了可以設置大小之外我們可以使用position來規定位置。

  • radial gradient(at<position>,<color-stop>[,<color-stop>]+)
    • position - 規定中心點的位置 位置是兩個值 （x,y）

可以更具上面給定屬性來參照 這裏使用 farthest-corner

        .c4{
            background-image: radial-gradient(farthest-corner at 40px 40px,
            #f35 0%, #43e 100%);
        }

• 畫一個漸變的圓

  html

      <div class="c5"></div
  

  css

          .c5{
              width: 200px;
              height: 200px;
              margin: 0 auto;
              border-radius: 50%;
              background:  radial-gradient(at 50px 50px ,red,yellow);
          }
  

00px;
margin: 0 auto;
border-radius: 50%;
background: radial-gradient(at 50px 50px ,red,yellow);
}