CSS3径向渐变语法解释

Question

CSS3径向渐变语法解释

3

有人能解释一下以下径向渐变的语法，或者提供一个在现代浏览器中可以使用的 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%)

- MojoJojo

http://www.impressivewebs.com/css3-radial-gradient-syntax/ - connexo

1个回答

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

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

- Harry · Accepted Answer

-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。因此，渐变的形状将是圆形。
下一组参数定义颜色及其结束/停止位置。渐变从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>