码迷,mamicode.com
首页 > Web开发 > 详细

CSS3的背景渐变gradient

时间:2014-09-11 17:22:32      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:jquery   ui   web前端   前端   框架   

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

我们先直接通过两个实例来说明这两种渐变的基本用法:分享一个最好用的UI前端框架!

线性渐变linear-gradient:

.代码 
  1. background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/  
  2. background:-webkit-gradient(linear,0 50%,10050%,from(#ace),to(#f96));/*Old gradient for webkit*/  
  3. background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/  
  4. background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/  

 

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

效果如下:

bubuko.com,布布扣

 

   径向渐变radial-gradient: 分享一个最好用的UI前端框架!

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

 

 

效果:

bubuko.com,布布扣

 

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

CSS3的背景渐变gradient

标签:jquery   ui   web前端   前端   框架   

原文地址:http://blog.csdn.net/ariss123/article/details/39207371

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!