当前位置: 主页 > 前端开发 > HTML5/CSS3 >

CSS3的背景渐变gradient

泡在网上的日子 发表于 2013-06-23 11:04 次阅读 gradient

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

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

线性渐变linear-gradient:

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内核浏览器老版本的写法。

效果如下:


   径向渐变radial-gradient:

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


效果:


IE浏览器对gradient的支持和其他现代浏览器差别较大,我们将在<<CSS3 径向渐变(radial-gradient)>>和<<CSS3 线性渐变(linear-gradient)>>两篇文章中分别说明。

上一篇:CSS3 --一句话概括Transform,Transition,Animation区别
Transform:对元素进行变形; Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。 Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多
下一篇:CSS3 线性渐变(linear-gradient)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等)、W