CSS3 径向渐变语法解释

Question

有人可以解释以下径向渐变语法，并可能提供适用于现代浏览器的 CSS3 标准格式的等效语法吗？

-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)

Answer 1

-webkit-radial-gradient(50% 50%, 
                        200% 50%, 
                        hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)

上面提供的radial-gradient可以解释如下：

渐变是径向渐变，这意味着颜色在 circular/elliptical 路径中沿定义的半径变化。
第一个参数50% 50%定义了渐变图像中心点的位置。这里只是应用它的容器元素的中心。
第二个参数200% 50%定义了X轴和Y轴的渐变半径。这里的半径是 X 轴容器宽度的 200% 和 Y 轴容器高度的 50%。
上述设置以及容器的尺寸决定了渐变的形状。如果容器高 250 像素，宽 250 像素，则 X 轴半径为 500 像素，而 Y 轴半径为 125 像素，因此渐变为椭圆形。另一方面，如果容器高 400px，宽 100px，则 X 轴半径为 200px，Y 轴半径也为 200px。因此，渐变的形状将是一个圆形。
下一组参数定义了颜色及其应放置的位置 end/stop。渐变将 hsla(0, 0%, 90%, 1) 作为颜色直到 5%，从 5% 到 30% 颜色会逐渐从 hsla(0, 0%, 90%, 1) 移动到 hsla(0, 0%, 85%, 1) 然后从 30% 到 100% 它会从hsla(0, 0%, 85%, 1) 到 hsla(0, 0%, 60%, 1).

此 radial-gradient 的等效标准语法如下：

background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);

下面的代码片段包含了两者的输出以供比较。

div {
  float: left;
  height: 250px;
  width: 250px;
  border: 1px solid black;
  margin-right: 4px;
}
.radial-grad {
  background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}

.radial-grad-standard {
  background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}

<div class='radial-grad'></div>

<div class='radial-grad-standard'></div>

CSS3 径向渐变语法解释

CSS3 Radial gradients syntax explanation

css

radial-gradients