使径向渐变半径为 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

编辑：针对现代语法进行了更新，我在下面保留了原始语法以记录 2011 年语法

---

您可以设置半径并以像素值或任何其他有效的 长度单位。

在下面的示例中，circle at 200px 200px 将圆的中心点设置为横向 200 像素，向下 200 像素，这也可以是 背景位置，例如左侧或顶部。

接下来的值是色标，并且是逗号分隔的颜色长度对。同样， color 和 长度 可以使用 red 10%，#333 10px 和rgb(10,47,10) 1em 都有效。

像 px 或 em 这样的值是绝对值，百分比值是相对于渐变容器的。

.gradient-demo {
  width: 500px;
  height: 400px;
  background: radial-gradient(circle at 200px 200px, #fff 0px, #fff 100px, #ff7ae9 101px);
}

<div class="gradient-demo"></div>

---

原始答案：

背景图像：-moz-radial-gradient（50px 100px，圆圈最远角，#ffffff，#ff7ae9 200px）；
背景图像：-webkit-radial-gradient（50px 100px，圆圈最远角，#ffffff，#ff7ae9 200px）；
背景图像：-o-径向渐变（50px 100px，圆圈最远角，#ffffff，#ff7ae9 200px）；
背景图像：-ms-radial-gradient（50px 100px，圆圈最远角，#ffffff，#ff7ae9 200px）；
背景图像：径向渐变（50px 100px，圆圈最远角，#ffffff，#ff7ae9 200px）；

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

“50px 100px”是圆心的位置，它有效
与 background-position 相同，因此像“left top”这样的值是
也很好。

有一些在线生成器可以帮助您解决所有问题
供应商特定前缀。

<小时>

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

<块引用>

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

如果您点击“长度”，它会显示

<块引用>

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