做一個徑向漸變半徑200px

Question

我如何使寬度和高度的半徑爲200px？我讀過這可以以像素爲單位完成，但每次嘗試都失敗了。

background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%); 
background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); 
background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); 
background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%) 
background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); 

Answer 1

編輯：加入所有的供應商前綴使其更清晰

---

background-image: -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image:  -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image:  -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image:   radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 

在這個例子中「200像素」是圓的大小，任何標準的CSS單元如px，em或百分比都很好。

的「50像素的100像素」是圓心的位置，它的工作方式相同background-position像「左上」，所以值也沒關係。

有幾個online generators可以幫助你與所有供應商的具體前綴。

---

p.s.
@Mohsen像素值都很好，MDN表示：

要麼如果點擊0％和100％或軸

沿漸變的長度之間的百分比 'length' 它說

長度的CSS語法是緊接着一個單位的數字。數字和單位之間的空格是不允許的。