CSS3 背景颜色渐变属性 gradient 使用详解及代码生成工具

作者:     目录: PHP+MySQL     发表: 2010年04月24日

利用CSS3新增的gradient(背景颜色渐变)属性,可以直接编写相应CSS代码,制作渐变背景颜色的效果。相对于制作渐变背景图片,利用CSS3制作的渐变背景颜色则更容易修改,维护更方便。

CSS3 gradient(背景颜色渐变)预览

CSS3 gradient(背景颜色渐变)代码书写规范及示例

/* Webkit浏览器 */
background-image:-webkit-gradient(
linear,  /* 渐变类型:线性渐变 */
10% 10%,  /* 分别对应X,Y 方向渐变起始位置 */
100% 100%,  /* 分别对应X,Y 方向渐变终止位置 */
color-stop(0.14, rgb(255,0,0)),   /* 渐变颜色位置,及颜色 */
color-stop(0.5, rgb(255,255,0)),  /* 渐变颜色位置,及颜色 */
color-stop(1, rgb(0,0,255))  /* 渐变颜色位置,及颜色 */
);
/* Moz Firefox浏览器 */
background-image:-moz-linear-gradient(
10 10 90deg, /* 渐变起始位置及角度 */
rgb(255,0,0) 14%,  /* 渐变颜色位置,及颜色 */
rgb(255,255,0) 50%,  /* 渐变颜色位置,及颜色 */
rgb(0,0,255) 100%  /* 渐变颜色位置,及颜色 */
);

源代码:CSS3 gradient(背景颜色渐变)源代码

IE浏览器下渐变设置方法:

/* IE浏览器 */
background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8 */

推荐:在线CSS3 gradient (背景颜色渐变)代码生成器