本文介绍了如何使用CSS来创建不同类型的渐变背景效果，并确保这些效果能在多种浏览器中兼容显示，包括从上到下、从左到右、指定角度及透明渐变等。
不兼容IE浏览器，所以IE中要添加默认的background或background-color1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom：
/* Firefox 3.6+ */
background-image:-moz-linear-gradient(top, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background-image:-webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background-image:-o-linear-gradient(top, #ace, #f96);
2、始于left(水平方向)和center(垂直方向)也是就Left → Right：
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #ace, #f96);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #ace, #f96);
3、起始于left(水平方向)和top(垂直方向):
background-image: -moz-linear-gradient(left top, #ace, #f96);
background-image: -webkit-linear-gradient(left top, #ace, #f96);
background-image: -o-linear-gradient(left top, #ace, #f96);
4、角度(Angle)：
.deg45 {
background-image: -moz-linear-gradient(45deg, #ace, #f96);
background-image: -webkit-linear-gradient(45deg, #ace, #f96);
background-image: -o-linear-gradient(45deg, #ace, #f96);
}5、变透明+渐变
div{
background-image:linear-gradient(
to bottom
rgba(0,0,0,.6) 0%,
rgba(0,0,0,.3) 50%,
rgba(0,0,0,0) 100%
);
background-image:-webkit-linear-gradient(
to bottom,
rgba(0,0,0,.6) 0%,
rgba(0,0,0,.3) 50%,
rgba(0,0,0,0) 100%
);
}
rgba(0,0,0,0) 50%
rgba(0,0,0,0) 50%
rgba(0,0,0,.6) 0%,
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
