CSS3的背景渐变gradient
浏览数：30 /
时间：2015年06月09日
CSS3 Gradient 分为 linear-gradient（线性渐变） 和 radial-gradient（径向渐变）。记住渐变并不是CSS3的一个属性，而是一个属性的值，虽然在CSS3中没有专门注明渐变是针对background的，但是目前我所了解到的是只有background才会应用渐变属性（background-image也可以）。
我们先直接通过两个实例来说明这两种渐变的基本用法：分享一个最好用的UI前端框架！
线性渐变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: 分享一个最好用的UI前端框架！
- background: -moz-radial-gradient(#ace, #f96, #1E90FF);
- background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
效果：
IE浏览器对gradient的支持和其他现代浏览器差别较大，我们将在<<CSS3 径向渐变（radial-gradient）>>和<<CSS3 线性渐变（linear-gradient）>>两篇文章中分别说明。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
