CSS3徑向漸變語法解釋

Question

有人可以解釋下面的徑向漸變語法，也許可以在現代瀏覽器中使用的CSS3標準格式提供其等價物嗎？

-webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%) 

Answer 1

-webkit-radial-gradient(50% 50%, 
         200% 50%, 
         hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%) 

上面提供的radial-gradient可以如下解釋：

• 梯度是徑向漸變，這意味着這兩種顏色在圓形/橢圓形的路徑沿限定的半徑發生變化。
• 第一個參數50% 50%定義了漸變圖像中心點的位置。這裏只是它所應用的容器元素的中心。
• 第二個參數200% 50%定義了X軸和Y軸的梯度半徑。這裏的半徑是X軸容器寬度的200％，Y軸容器高度的50％。
• 上述設置以及容器的尺寸決定了漸變的形狀。如果容器高250px，寬250px，則X軸的半徑爲500px，而Y軸的半徑爲125px，因此梯度爲橢圓。另一方面，如果容器高400px，寬100px，則X軸的半徑爲200px，Y軸的半徑也爲200px。所以，漸變的形狀將是一個圓。
• 下一組參數定義顏色以及它們應該結束/停止的位置。顏色從5％到30％顏色將從hsla(0, 0%, 90%, 1)逐漸移動到hsla(0, 0%, 85%, 1)，然後從30％到100％，它將從hsla(0, 0%, 85%, 1)移動到hsla(0, 0%, 60%, 1)。

---

此radial-gradient等效標準語法將執行以下操作：

background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%); 

以下代碼段具有兩者的用於比較的輸出。

div { 
 
    float: left; 
 
    height: 250px; 
 
    width: 250px; 
 
    border: 1px solid black; 
 
    margin-right: 4px; 
 
} 
 
.radial-grad { 
 
    background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%); 
 
} 
 

 
.radial-grad-standard { 
 
    background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%); 
 
}

<div class='radial-grad'></div> 
 

 
<div class='radial-grad-standard'></div>