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％。
上述设置以及容器的尺寸决定了渐变的形状。如果容器高250像素，宽250像素，则X轴的半径为500像素，而Y轴的半径为125像素，因此梯度为椭圆形。另一方面，如果容器高400像素，宽100像素，则X轴的半径为200像素，Y轴的半径也为200像素。因此，渐变的形状将是一个圆圈。
下一组参数定义颜色以及结束/停止的位置。渐变的颜色为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%);

下面的代码段有两个输出用于比较。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS3径向渐变语法解释

1 个答案: