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

Question

我需要制作多个如下所示的渐变：

现在，了解灰度/白色渐变的中心如何不同，在某些情况下，它来自中心，有些来自左中心，有些来自中底。

我使用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 ); 

在这里找到 ，现在可以像上图所示那样进行渐变，还是我必须使用图像？

Answer 1

您的问题分为两部分：

1. 是否可以像图像一样进行渐变？ 对的，这是可能的。 radial-gradient定义将位置作为参数 ，通过设置正确的值，我们可以产生所需的效果。
2. 梯度生成器本身可以生成吗？ 似乎所链接的生成器似乎无法执行此操作，因为“方向”设置为径向时，它会将位置默认为居中，并且没有字段可更改其值。 可能还有其他渐变生成器，其中有一个用于设置此值的字段，但是您仍然必须自己提供中心点。

以下是具有不同位置的径向渐变的代码段供您参考。

 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>