利用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% /* 渐变颜色位置,及颜色 */
);
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 */
22 个评论