|
阅读：7136回复：0
css3 径向渐变 详解
一、径向渐变的语法
CSS3的径向渐变已得到众多浏览器引擎的支持，只不过其语法的版本根据不同的引擎浏览器，其语法也不一样，特别是在Webkit引擎的浏览器下和线性渐变的语法类似，也有新旧之法。而在其他几大引擎的浏览器，其语法基本类似，只是使用的前缀不同而以。特别是在2013年04年，W3C为CSS3径向渐变推出最新的语法格式。接下来我们一起来看看各引擎浏览器下的径向渐变语法。 1. Webkit引擎的CSS3径向渐变语法 CSS3径向渐变在Webkit引擎下的语法和线性渐变的语法一样，分为两种，一种是老版本的语法，另外一种是新版本语法： Webkit引擎下的老版本语法： -webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*); Webkit引擎新式语法： -webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); Webkit引擎中的浏览器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎径向语法，Chrome10.0+和Safari5.1+支持Webkit引擎新式径向渐变。 2. Gecko引擎的CSS3的径向渐变语法 Gecko引擎的CSS3的径向渐变和Webkit引擎新式语法类似，只是使用的前缀不同而以： -moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); Gecko引擎的Firefox浏览器中Firefox3.6+版本支持径向渐变。 3. Presto引擎的CSS3径向渐变语法 Presto引擎的CSS3径向渐变语法和Webkit引擎的新式语法类似，只是使用的前缀不同而以： -o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); Presto引擎中的Opear11.6开始支持径向渐变。 4. Trident引擎的CSS3径向渐变语法 Trident引擎的浏览器从IE10开始支持径向渐变语法，其语法格式与Webkit引擎的新式语法类似，仅不同的是其前缀不同，需要使用“-ms-”： -ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); 5. W3C标准径向渐变语法 W3C组织从2013年04月开始给径向语法推出新的语法规则： radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+); 不过支持径向渐变语法的浏览器，到写这文稿时，仅有IE10+,Firefox16+浏览器支持。 二、径向渐变的属性参数 CSS3的径向渐变相对于线性渐变要复杂的多，属性参数也繁多复杂。CSS3径向变中新老语法中的属性参数定义如下： <position>：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种： <length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。 <percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。 left：设置左边为径向渐变圆心的横坐标值。 center：设置中间为径向渐变圆心的横坐标值或纵坐标。 right：设置右边为径向渐变圆心的横坐标值。 top：设置顶部为径向渐变圆心的纵标值。 bottom：设置底部为径向渐变圆心的纵标值。 <shape>：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”： circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变 ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。 <size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有： closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边； closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角； farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边； farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角； 如果<shape>设置了为“circle”或者省略，<size>可能显式设置为<length>。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。 如果<shape>设置了“ellipse”或者省略，<size>可能显式设置为［<length>|<percentage>］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用<length>定义大小之外还可以使用<percentage>来定义这两半径大小。使用<percentage>定义值是相对于径向渐变容器的尺寸。同样不能为负值。 <color-stop>：径向渐变线上的停止颜色，类似于线性渐变的<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。 三、径向渐变的基本用法 虽然径向渐变要比线性渐变更为复杂，只要了解了其基本语法以及相关属性参数的作用，我想并不会需要花太多的时间去适应。接下来，我们通过实战来加强径向渐变的使用。下面的所有例子我们都在一个宽度为400像素，高为300像素的容器中实现。 先来看一个最简单的径向渐变，圆心都是容器正中间，从“hsla(120,70%,60%,.9)”颜色向“hsla(360,60%,60%,.9)”颜色实现径向渐变： div { width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); } 效果如下图所示： 图片：jb1.png 
正如你所看到的，圆形的渐变是一个特殊的椭圆渐变，水平半径和垂直半径具有相同的长度值。 图片：jb3.png
既然圆形渐变是椭圆渐变的一种特殊情况，如果我们渐变主要半径（水平半径）和次要半径（垂直半径）不相同时就是一个椭圆形渐变。 图片：jb4.png
正如上面所言，主要半径和次要半径不相等时，制作的径向渐变是椭圆形渐变，在制作椭圆形渐变，可以使用关键词“ellipse” 除了使用关键词制作不同的径向渐变，还可以用不同的渐变参数制作径向渐变效果，通过制作同心圆，主要半径和次要半径来决定径向渐变的形状。 例如，圆心位置都在“200px,150px”处，主要半径为50px，次要半径为150px，从“hsla(120,70%,60%,.9)”色到“hsla(360,60%,60%,.9)” 色径向渐变： div { width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); background-image: radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); } 效果如下图所示： 图片：jb2.png
更详细的细节，请参考原文 原文: http://www.w3cplus.com/css3/new-css3-radial-gradient.html © w3cplus.com 扩展：http://www.lvyestudy.com/css3/css3_6.5.aspx http://www.cnblogs.com/xiaohuochai/p/5383285.html |
|
|
公众号
