css3径向渐变背景,CSS3的背景渐变gradient

CSS3 Gradient 分为 linear-gradient(线性渐变) 和radial-gradient(径向渐变)。记住渐变并不是CSS3的一个属性&＃xff0c;而是一个属性的值&＃xff0c;虽然在CSS3中没有专门注明渐变是针对background的&＃xff0c;但是目前我所了解到的是只有background才会应用渐变属性(background-image也可以)。

我们先直接通过两个实例来说明这两种渐变的基本用法&＃xff1a;

线性渐变linear-gradient&＃xff1a;background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/

background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/

background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/

background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

其中第二行的-webkit-gradient是webkit内核浏览器老版本的写法。

效果如下&＃xff1a;

径向渐变radial-gradient:background: -moz-radial-gradient(#ace, #f96, #1E90FF);

background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果&＃xff1a;

IE浏览器对gradient的支持和其他现代浏览器差别较大&＃xff0c;我们将在<>和<>两篇文章中分别说明。