CSS3欲速则不达—Gradients渐变

CSS3 Gradients是CSS3新增的属性,Gradient有linear-gradient(线性渐变)和radial-gradient(径向渐变)。因为各个浏览器的CSS渲染引擎不同,导致属性前面都得加前缀-moz-(firefox)、-webkit-(chrome、Safari)、-o-(Opera)、 -ms-(IE10+),因为IE9也不支持CSS3的Gradient属性,所以只能通过滤镜(filter)来实现。

今年一月,webkit小组宣布在css3渐变上,将采用W3C的语法,但由于之前的语法在08年提出,已经较为广泛的使用,所以在新的Webkit引擎中,保留了下列语法,但是建议使用Mozilla语法,所以我们今天就不讲webkit之前的语法了。

Gradients渐变属性

linear-gradient( [ <point> || <angle>,]? <color-stop>, <color-stop> [, <color-stop>]* )
/* 实际用法*/
background-img: linear-gradient(left top, red, blue);

radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
/* 实际用法*/
background-img: radial-gradient(left top, ellipse closest-side, red, blue);
Gradients渐变基本语法

以上写法在不同浏览器得加上各自浏览器前缀,一般W3C写法写最后,因为不知道哪天浏览器产商宣布不需要前缀。

.example{width:200px;height:200px;}
.example1{
    background: rgb(240,183,161); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* IE10+ */
    background: linear-gradient(135deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.example2{
    background: rgb(240,183,161); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

DEMO

gradientGradients取值

linear-gradient(线性渐变)取值

linear-gradient(线性渐变):共有两个参数,分别是point(起止点)和color-stop(起止色):

point起止点参数,表示渐变从哪里开始:

  • left设置左边为渐变起点的横坐标值
  • right设置右边为渐变起点的横坐标值
  • top设置顶部为渐变起点的纵坐标值
  • bottom设置底部为渐变起点的纵坐标值
  • center表示中间为横纵为渐变起点

使用半分比来表示水平、垂直开始位置,比left、right更精确。

如果使用角度值(angle),如-45deg = left top45deg = right top,角度单位包括有:deg, grad, rad, turn,IE8以下不支持。

color-stop参数表示起止颜色,可以使用长度值或者百分比来制定起止色范围,如 red 0%,blue 25%,green 50%,yellow 75%,white 100%

radial-gradient(径向渐变)取值

radial-gradient(径向渐变):其共有三个参数,分别是position(圆心位置)、shape(形状)和color-stop(起止色):

position参数表示渐变从哪里开始:

  • left设置左边为径向渐变圆心的横坐标值
  • right设置右边为径向渐变圆心的横坐标值
  • top设置顶部为径向渐变圆心的纵坐标值
  • bottom设置底部为径向渐变圆心的纵坐标值
  • center中间为径向渐变圆心的横、纵坐标值

使用半分比来表示水平、垂直开始位置,比left、right更精确,也可以使用角度值来表示

shape参数表示渐变的形状,有circleellipse,分别置顶圆形和椭圆形径向渐变,而设置了形状之后还可以继续设置他们的size和shape-size

    size参数:

  • closest-side:
    指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side:
    指定径向渐变的半径长度为从圆心到离圆心最远的边
  • farthest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最远的角
  • contain:
    包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
  • cover:
    覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

shape-size参数:

  • percentage用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
  • length用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。

color-stop参数表示起止颜色,与线性渐变类似,使用长度值或者百分比来制定起止色

重复渐变

CSS3渐变还有一个重复渐变的应用,repeating-linear-gradient和repeating-radial-gradient。repeating-radial-gradient()的语法与radial-gradient()相同,repeating-linear-gradient()的语法与linear-gradient()相同。

语法介绍略

Gradients案例

Gradients平常使用最多的就是那些不用图片只用Gradients实现的精美的按钮,网上搜来一大把,所以就不介绍了。

利用渐变使背景图片渐变透明

背景色不仅能透明,还能渐变,能让图片,使用一个白色或者其他颜色的渐变。

.back-img{
    width: 460px; height: 307px;
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%),url(../pic/ex.jpg); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))),url(../pic/clip.jpg); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),url(../pic/ex.jpg); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),url(../pic/ex.jpg); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),url(../pic/ex.jpg); /* IE10+ */
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),url(../pic/ex.jpg); /* W3C */
}

原图

CSS3欲速则不达—Gradients渐变

DEMO

背景图片渐变

图片渐变现在用的比较多的地方就是背景,所以例子就不再举了,熟悉这些写法就好了

本文源链接:http://www.html5jscss.com/css3-gradients.html

转载请注明《CSS3欲速则不达—Gradients渐变》| html5jscss

评论关闭了.