天高任鸟飞

       

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 （背景颜色渐变）代码生成器

标签：