Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

radial-gradient CSS3的蛋疼的径向渐变

  首先,咱来扯一下蛋。下面是扯蛋的代码 <style>
div {
  width:100px;height:100px;border-radius:50px;
  background:radial-gradient(at 35px 35px,#FFF,#CCC,#FFF);
  background:-webkit-radial-gradient(35px 35px,#FFF,#CCC,#FFF);
}
</style>
<div></div>

  这个代码就能扯出一个蛋来!这个蛋上面的颜色就是使用径向渐变调出来的。第一行样式是设置容器的宽高,并且把圆角设置成宽高的一半(当作半径使用),这样就可以得到一个圆了。后面两行样式是给这个圆上色,使用径向渐变让这个圆看起来像蛋蛋!FireFox和Opera不需要前缀可以直接使用radial-gradient(它们曾经也需要前缀,现在不需要了)。Chrome需要-webkit-前缀才可以使用。而且有前缀的径向渐变和没有前缀的径向渐变语法有一点不同。
  先来说说无前缀的径向渐变。它使用“at语法” radial-gradient(
  [
    [渐变大小]?
    [ at 渐变圆心坐标]?
  ,]?
  颜色[ 开始位置]
  [,颜色[ 开始位置]]+
);
  其实真正的语法比这个复杂很多,这个是根据我自己的理解简化了的。说白了就是第一个参数用来指定位置和大小,后面是颜色列表。第一个参数的格式是“渐变大小 at 渐变圆心坐标”。渐变大小如果只有一个值,那么它就代表这个渐变是个正圆,这个数值是它的半径。如果是两个值,把这个渐变变成椭圆形的;渐变圆心坐标是从容器的原点开始算起。   
  这些参数是可以不指定而使用默认值的。圆心坐标的默认值是容器的中心,这个比较简单。而渐变大小的默认值就比较复杂了。如果容器是正方形的,那么渐变大小的默认值就是一个正圆。这个正圆的半径是圆心到容器最远角的距离。 <style>
div {width:100px;height:100px;margin:10px;float:left;}
#a {background:radial-gradient(red,green);}
#b {background:radial-gradient(at 35px 35px,red,green);}
#c {background:radial-gradient(at 0px 0px,red,green);}
</style>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

  如果容器不是正方形,那么这个渐变大小就会变成椭圆。这个椭圆的两个半径就是渐变圆心到容器最远的角形成的矩形的宽高乘以sqrt(2),这个可以根据椭圆的方程来推导(其实就是矩形的外接椭圆半径)。不过一般不需要做这样的计算。
  搞明白第一个参数之后就是后面的颜色列表。每个参数除了颜色值以外还可以附带一个开始位置。 <style>
div {width:100px;height:100px;margin:10px;float:left;}
#a {background:radial-gradient(red 100%,green);}
#b {background:radial-gradient(red,green 0%);}
</style>
<div id="a"></div>
<div id="b"></div>

  颜色的分布是从0%(渐变圆心)的位置到100%的位置的(100%的位置也就是渐变的半径)。或者说默认情况下,第一个颜色的位置是0%,最后一个颜色是100%。超出这个范围的用距离最近的颜色来填充。比如上面的第一个例子,red本身是在0%的位置,但是把它设置成了100%的位置。这样red就从100%的位置开始往外延伸,那么0%到100%的位置就变成没有设置颜色了,这时候它会被自动填充最近的颜色,也就是red。第二个例子也是一样的道理,由于把green设置到了0%的位置,那么red的范围就是0%到0%,这样就看不见了。而green的开始位置被设置到0%后就变成了0%到100%,所以第二个例子从0%到100%的区域都是绿色。默认情况下,设置多个颜色他们会平分这个100%的区域来渐变。当然除了百分比,我们也可以使用具体的像素来设置这个大小。这个用像素设置的大小指的是从渐变圆心向外延伸的距离。 <style>
div {
  width:100px;height:100px;margin:10px;float:left;
  background:radial-gradient(at 0px 0px,red,green 80%,blue);
}
</style>
<div></div>

  了解这么多,镜像渐变使用就没问题了。剩下的就是浏览器问题,我们之前说的这一大堆都是拿没有前缀的CSS说的,而webkit目前暂时不兼容没有前缀的径向渐变,所以我们需要单独为它写样式。不过计算方法和这个是一样的就不需要重复说了。只是写法上有点不同。带前缀的样式不能使用“渐变大小 at 渐变圆心坐标”这样的写法。它把这东西分成了两个参数。第一个参数表示渐变圆心坐标,第二个参数表示渐变大小。和上面一样,这两个参数也是可以省略的。默认值的计算也一样,仅仅是格式不同而已,所以我就不重复说什么了。另外要提的就是火狐同时支持前缀的写法和无前缀的写法,而Opera不支持带前缀的写法。IE从10开始兼容径向渐变,用的是-ms-前缀,具体由于我懒的安IE10就没研究了。不过计算方法也和上面一样,真想试自己装个IE10去= =。。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^