CSS3 Gradient 分为 linear-gradient(线性渐变) 和 radial-gradient(径向渐变)。记住渐变并不是CSS3的一个属性,而是一个属性的值,虽然在CSS3中没有专门注明渐变是针对background的,但是目前我所了解到的是只有background才会应用渐变属性(background-image也可以)。
我们先直接通过两个实例来说明这两种渐变的基本用法:分享一个最好用的UI前端框架!
线性渐变linear-gradient:
.代码
其中第二行的-webkit-gradient是webkit内核浏览器老版本的写法。
效果如下:
径向渐变radial-gradient: 分享一个最好用的UI前端框架!
.代码
效果:
IE浏览器对gradient的支持和其他现代浏览器差别较大,我们将在>和>两篇文章中分别说明。