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可以解释如下：

• 渐变是径向渐变，这意味着颜色沿定义的半径以圆形/椭圆形路径变化。
• 第一个参数50% 50%定义了渐变图像中心点的位置。在这里，它只是应用它的容器元素的中心。
• 第二个参数200% 50%定义了渐变在X轴和Y轴的半径。这里的半径是 X 轴上容器宽度的 200% 和 Y 轴上容器高度的 50%。
• 上述设置以及容器的尺寸决定了渐变的形状。如果容器是 250px 高和 250px 宽，那么 X 轴的半径是 500px，而 Y 轴的半径是 125px，所以渐变是椭圆的。另一方面，如果容器是 400px 高和 100px 宽，那么 X 轴的半径将是 200px，Y 轴的半径也将是 200px。因此，渐变的形状将是一个圆形。
• 下一组参数定义颜色以及它们应该在哪里结束/停止。渐变将以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) 移动到 @987654329 @。

---

此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%);

下面的sn-p有两者的输出对比。

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>