CSS3 Gradient Background
Linear background 180degree
#linearBg1 {
height: 100px;
background-color: #1a82f7;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) !important;
background-image: url(images/linear_bg_1.png);// fallback image
}
Linear background 90degree
#linearBg2 {
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
Radial background
#radialBg {
width: 100px;
height: 100px;
background-image: url(images/radial_bg.png);// fallback image
background-position: center center;
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #2F2727 0%, #1a82f7 100%);
background-image: -webkit-gradient(radial, center center, 10, center center, 80, from(#2F2727), to(#2F2727));
}
代码整理:脚本之家 更多相关效果,请到脚本之家 脚本下载栏目
*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。
脚本之家素材中心整理。