|
发表于 2013-3-26 13:11:46
|
|阅读模式
来自 中国河南济源
要得上面菜单背景的渐变效果,我们这样去定义CSS3样式(分别对3类浏览器):- background-image: -moz-linear-gradient(top, #009900, #0A3C01); /* Firefox */
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #009900), color-stop(1, #0A3C01)); /* Saf4+, Chrome */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009900', endColorstr='#0A3C01', GradientType='0'); /* IE*/
复制代码 #009900 和 #0A3C01 为渐变的两端颜色,可根据需要自行修改。
参数说明:
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。
第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
webkit内核和Firefox内核的渐变还可设置中间色,甚至还可设置圆形渐变和椭圆渐变,由于IE无法实现,所以复杂渐变还是用背景图片实现比较方便。 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?注册
x
|