I am houbiao beta 0.1

CSS3 -webkit-gradient之linear-线性渐变

分类:CSS3

CSS3在webkit核心浏览器下的渐变样式,包括线性渐变(linear)和径向渐变(radial)。本节主要认识一下linear-线性渐变。基本语法如下:background-image: -webkit-gradient(linear,left top,left bottom,from(#f00),to(#ff0),color-stop())}

以上就是创建一个最基本的线性渐变,其含义是:首先告诉浏览器这个是webkit核心的属性,渐变样式为linear,从left top到left bottom,画一个由#f00到#ff0的渐变。结果如图。CSS3 -webkit-gradient之linear-线性渐变

继续往下,还有个color-stop属性,此属性指定渐变进程中特定位置的特定颜色。我们还用之前创建的渐变,使用方法如下:background-image: -webkit-gradient(linear,left top,left bottom,from(#f00),to(#ff0),color-stop(0.5, #0ff),color-stop(0.5, #000))}

以上方法所实现的效果如图。CSS3 -webkit-gradient之linear-线性渐变其含义是在渐变位置的0.5(即50%)处增加青色(#0ff),然后又在相同的位置增加黑色(#000),即实现了2段线性渐变。

DEMO - CSS3-webkit-gradient之linear-线性渐变

以上只是个人测试得出的结论,不够全面,有遗漏和不妥之处还请各位指出。

3570 reads 0 comment

上一篇:CSS3 transition 过渡动画

暂时还没有回复信息

Leave a comment

*