css - 做一个径向渐变半径 200px

Question

如何使半径的宽度和高度为 200 像素？我读过这可以以像素为单位完成，但每次尝试都失败了。

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);

在本例中，“200px”是圆的大小，任何标准的 CSS 单位，例如 px、em 或百分比都可以。

'50px 100px' 是圆心的位置，它的工作方式与背景位置相同，所以像 'left top' 这样的值也可以。

有一些在线生成器可以帮助您处理所有供应商特定的前缀。

---

ps
@Mohsen 像素值很好，MDN说：

0% 到 100% 之间的百分比或沿梯度轴的长度

如果你点击“长度”，它会说

长度的 CSS 语法是一个数字，后面紧跟一个单位。数字和单位之间不允许有空格。