在 CSS 中更改径向渐变的中心点

Question

我需要像下面这样制作多个渐变：

现在看看 grey/white 渐变的中心有何不同，在某些情况下它来自中心，一些来自左中心，一些来自中心底部。

我使用了THIS工具来生成下面的渐变：

background: #f9f9f9;
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d1d6db',GradientType=1 );

FIDDLE HERE，现在是否可以像我在上图中显示的那样制作渐变，或者我必须使用图像吗？

Answer 1

您的问题分为两部分：

是否可以像图像中那样制作渐变？是的，有可能。 radial-gradient definition takes the position as a parameter通过设置正确的值，我们可以产生所需的效果。
梯度生成器自己能生成吗？有问题的生成器似乎无法执行此操作，因为当 Orientation 设置为径向时，它会将位置默认为中心，并且没有字段可以更改其值。可能有其他梯度生成器具有用于设置此值的字段，但您仍然必须自己提供中心点。

下面是一个具有不同位置的径向渐变片段供您参考。

div {
  float: left;
  height: 200px;
  width: 200px;
  margin: 2px;
  background: #f9f9f9;
  }
div:nth-of-type(1){
  background: radial-gradient(ellipse at center, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(2){
  background: radial-gradient(ellipse at left bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(3){
  background: radial-gradient(ellipse at left top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(4){
  background: radial-gradient(ellipse at right bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(5){
  background: radial-gradient(ellipse at right top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(6){
  background: radial-gradient(ellipse at center top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(7){
  background: radial-gradient(ellipse at 10% 20%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(8){
  background: radial-gradient(ellipse at 75% 75%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(9){
  background: radial-gradient(ellipse at 20% 80%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

在 CSS 中更改径向渐变的中心点

Changing the center point of a radial gradient in CSS

html

css

radial-gradients

css-gradients