将径向渐变的半径设为200像素。

Question

将径向渐变的半径设为200像素。

7

如何使半径的宽度和高度为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%);

- android.nick

半径是直径的一半：如果半径为200像素，那么宽度和高度将为400像素，所以这个问题应该是“半径100像素”。 - Dai

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jedidiah · Accepted Answer

编辑：针对现代语法进行更新，以下是2011年语法的记录。

您可以将渐变的半径和位置设置为像素值或任何其他有效的长度单位。

在下面的示例中，circle at 200px 200px 将圆的中心点设置为横向200px，纵向200px，这也可以是background-position接受的任何值，例如左侧或顶部。

接下来的值是颜色停止，由color length逗号分隔的一对。再次，任何有效的颜色和长度值都可以使用。 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>

Original Answer:

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);
In this example the '200px' is the size of the circle, any standard CSS units such as px, em or percentages are fine.

The '50px 100px' is the position of the centre of the circle, it works the same way as background-position so values like 'left top' are fine too.

There are a few online generators that can help you with all the vendor specific prefixes.

p.s. @Mohsen pixel values are fine, MDN says:

either a percentage between 0% and 100% or a length along the gradient axis

If you click on 'length' it says

The CSS syntax for length is a number followed immediately by a unit. Space between the number and the unit is not allowed.