04-漸變

重複漸變

重複漸變，在渲染時，終止顏色會在兩個方向上無限重複，它們的位置以最後指定的終止顏色的位置和第一個指定的終止顏色的位置之間的差值的倍數移位。

例如，repeating-linear-gradient(red 10px, blue 50px) 等效於linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)。注意，最後一個終止顏色和第一個終止顏色總是在每個組的邊界處重合，如果漸變沒有以相同的顏色開始和結束，這將產生尖銳的過渡。

• css 3中的線性漸變和徑向漸變不支持自動重複的漸變模式，但可以通過``repeating-linear-gradient()`

  、``repeating-radial-gradient()`函數來實現重複漸變的效果。

• 語法：linear-gradient(angle,color-stop,color-stop)

  • angle:表示線性漸變的基準線角度，單位爲deg
  • color-stop :漸變顏色以及位置

  參數與其他兩種漸變一樣，作用也是想同的，只是顯示效果不同

• 測試

  html

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

  css3

          .c1,.c2,.c3,.c4{
              width: 500px;
              height: 200px;
              margin: 50px auto;
          }
          .c1{
             background: repeating-linear-gradient(-45deg,yellow 0px,red 5px,green 5px,white 10px);
          }
  
          .c2{
              background: repeating-linear-gradient(-45deg,red 0px,red 5px,white 5px,white 10px);
  
          }
  
          .c3{
              background:  repeating-radial-gradient(circle,yellow 0px,red 5px,green 5px,white 10px);
          }
  
  
          .c4{
              background:  repeating-radial-gradient(circle,black 0px,black 5px,lightblue 5px,lavender 10px);
          }
  

  效果