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

在这个例子中,'200px'是圆的大小,任何标准的CSS单位,如px,em或百分比都可以.

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

有一些在线生成器可以帮助您使用所有供应商特定的前缀.

ps
@Mohsen像素值很好,MDN说:

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

如果你点击' 长度 '就会说

长度的CSS语法是一个紧跟一个单元的数字.数字和单位之间的空格是不允许的.