WonderCSS

CSS3新属性线性渐变linear-gradient简单应用

在设计网页时我们经常要做出一些渐变效果,经常的做法是作出一张图片来平铺。CSS3为了终结这些尴尬的平铺图片推出了新属性linear-gradient,虽然IE版本在低于10里还没有正式的兼容方法,但这足以让我们在设计网站时有更多的方法来润色。

background-image: linear-gradient(left, #003366, #0099CC, #0099CC);

linear-gradient 的属性为 方向, 起始颜色, 过渡颜色, 结束颜色(也就是最后一个色值);

方向为left时意思是至左向右,为top时为至上向下。这个属性支持多色渐变。但目前这个属性在W3C没有完全定下来标准,直接写linear-gradient无法使用,必须通过标注浏览器内核的方法来实现。如:


background-image: -webkit-linear-gradient(left, #003366, #0099CC);
background-image: -moz-linear-gradient(left, #003366, #0099CC);
background-image: -o-linear-gradient(left, #003366, #0099CC);

注:background-image: -o-linear-gradient(left, #003366, #0099CC);即将告别CSS舞台,因为Opera逐步把自己的Presto引擎换成WebKit内核

By 于湛 发布于 2013.02.16 3,030 次浏览

发表评论

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