分解径向渐变语法

发布日期:2015-09-03 22:14:28
在 background 属性之后,我们设定的值是 radial-gradient (而不是 linear-gradient ) 。
然后在圆括号中设定起点。在上一节的例子中我们用的是 center ,其实也可以使用如
25px 25px 这样的值,这就表示从距元素上边和左边均为 25 像素的那个点开始渐变。
例如:
background: radial-gradient(25px 25px, ellipse cover, #ffffff 72%, #dddddd 100%);
这行代码产生北京网站设计的效果如下图所示:
中心点距离元素上边和左边均为 25像素,然后向四周平滑辐射。
声明中的下一个值更简单,它指的是径向渐变的形状和大小:
background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
渐变形状要么是 circle (圆形,渐变会均匀地向各个方向辐射) ,要么是 ellipse (椭
圆形,在不同的方向辐射量不同) 。而渐变形状的大小则有很大的灵活性,大小值可以是
下列任何一种。
  closest-side : (渐变形状是圆形时) 以距离中心点最近的一边为渐变半径, 或者 (渐
变形状是椭圆形时)以距离中心点最近的水平或垂直边为渐变半径。
  closest-corner :以距离中心点最近的一角为渐变半径。
  farthest-side :和 closest-side 正好相反, (渐变形状是圆形时)以距离中心点
最远的一边为渐变半径,或者(渐变形状是椭圆形时)以距离中心点最远的水平或垂
直边为渐变半径。
  farthest-corner :以距离中心点最远的一角为渐变半径。
  cover :和 farthest-corner 完全一样。
  contain :和 close s t-side 完全一样。
接下来是定义渐变起点、过渡颜色点以及终点(这部分和线性渐变是一样的) 。
例如,我们将之前的规则改成如下这样:
background: radial-gradient(20px 20px, circle cover,
hsla(9,69%,85%,0.5) 0%,
hsla(9,76%,63%,1) 50%,
hsla(10,98%,46%,1) 51%,
hsla(24,100%,50%,1) 75%,
hsla(10,100%,39%,1) 100%);
可以看到,我们是以距离左边和上边均为 20像素的点为中心点,使用圆形渐变,渐变半
径覆盖整个元素显示区域,并使用了多组 HSL(A)的过渡颜色点。
这效果从美学角度讲确实不敢恭维, 但我希望这能说明使用纯 CSS3制作视觉效果的无穷
威力。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计