CSS3学习:线性渐变(linear-gradient)

在切一块很大的渐变背景图时,突然想为啥不试试用css3来实现,撇开兼容问题开始学习这个有趣的css3属性。于是分别在MDCSRL找到了对应的文档,结果出乎预料的发现Gecko和webkit的实现方式竟然不一样,按以往的经验这两个的写法应该只是-moz和-webkit开头的区别(webkit已经更新了语法),分别来看下这个属性的两种写法:

对Gecko内核浏览器:
-moz-linear-gradient([point || angle,]? stop, stop [, stop]*)

对webkit内核浏览器:
-webkit-gradient(type, start_point, end_point [, stop]*)

看上去有点复杂,让我们来逐个分解,先从Gecko的开始。

-moz-linear-gradient
point是用来指定渐变起始点的,它的值和background-position的值是一样,它可以是百分比,像素值或“left”、“right”、“top”与“bottom”等。
angle是用来指定渐变的角度。
stop必须指定起始和结束的渐变颜色,颜色值后可以设置渐变结束位置,两者以空格隔开。

-webkit-gradient
type指定渐变类型,目前有两个值:linear和radial,本文讨论的是线性渐变,使用linear。
start_point和end_point用来指定渐变起始点和终点坐标。
stop用来指定渐变颜色。

请在firefox3.6+,safari4+或chrome4+运行下面的实例,才能看到效果。如果考虑到兼容性问题,在不用图片的前提下,你可以开头设置一个纯色的背景代替,这样不会太影响整体设计的美观。当然虽然IE有滤镜filter: progid:DXImageTransform.Microsoft.Gradient()可以实现,但不推荐。

提示:你可以先修改部分代码再运行。

代码中,你需要注意的是:1,webkit的stop的写法有from跟to,这样很直观;2,webkit中渐变起始和终点坐标是没有单位的;3,与webkit相反,Gecko中颜色值后的渐变结束位置值是有单位的。

Tags:,

如需转载,请注明出处:https://i.wanz.im/2010/07/15/css3_linear_gradient/

Comments

  1. By 周威

    回复

    • By 丸子

      回复

      • By 周威

        回复

        • By 丸子

          回复

  2. By ucer

    回复

  3. 回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.