HTML5渐变

准备： Safari中的 color-stop

语法：color-stop（stop, color）
参数：stop，值为百分比或0-1之间的一个十进制数。表示color的位置位于整个渐变路径的相对位置。
color，表示在stop处出现的颜色。

圆角、渐变、阴影三大大杀器之一渐变的解决方案。css3.0有两种渐变，直线渐变linear-gradient和放射渐变radial-gradient。

Linear Gradient

语法：linear-gradient(渐变位置和角度，起始点，... 中间点...，结束点)

参数：
渐变位置的值可能是top、bottom、left、right，也可能是前而之一与后二之一的组合。
top， 渐变方向以上边界的中心为起点，止于下边界中心。 FF中的默认值。Safari好像不同。
bottom， 渐变方向以下边界的中心为起点，止于上边界中心。
left， 渐变方向以左边界的中心为起点，止于右边界中心。
right， 渐变方向以右边界的中心为起点，止于左边界中心。
top， 渐变方向以上边界的中心为起点，止于下边界中心。
top left， 渐变方向以左上顶点为起点，止于右下顶点。
top right， 渐变方向以右上顶点为起点，止于左下顶点。
bottom left， 渐变方向以左下顶点为起点，止于右上顶点。
bottom right，渐变方向以右下顶点为起点，止于左上顶点。

渐变角度的值形如45deg，表示最终的渐变方向是在位置参数决定的渐变方向上逆时针旋转45度。 默认为0。

起始点、 中间点和 结束点，Safari中起点为from(color)，结束点为to(color)，中间点以color-stop(stop,color)的形式表示。Firefox中均以color+空格+stop百分比的形式表示。



试一试

将下面的代码添加到空白htm，FF中可以看到一个从左上往右下由红变黑的渐变背景。

1 < style type ="text/css" >
2
3 .showbox {
4 width : 150px ;
5 height : 200px ;
6 margin : 100px ;
7 border : 1pxgreensolid ;
8 background : color: #000000;">;
9 background : -moz-linear-gradient(lefttop,#f00,#000) ; /* 只有两个点时，stop分别默认为0和100% */
10 }
11
12 </ style >
13
14 < div class ="showbox" > box1 </ div >

如下：

稍作修改，增加一个中间渐变色蓝色。

background:"#0000ff">#f00,#00f 50%, #000);

FF中结果如下：

红色的50%也可省略，FF中，如果省略这个stop值，浏览器会等分渐变路径，来依次填上关键点的颜色。

另外，FF中的stop值，可以是大于1的百分比，Safari中只能使用小于1的值。



Radial Gradient

语法：

radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)

bg-postion: 同直线渐变大致相同。但默认是center。
angle: 决定测量color-stop中的distance的方向（怀疑是FF中的color-stop，Safari不详。）。
shape：circle/ellipse, 默认ellipse.
size： closet-side/closest-corner/farthest-side/farthest-corner/contain/cover，默认cover.

<!--<br></!--<br></div></div> </div> <div class="share_buttons" id="sharePanel"></div> <div class="article_next_prev"> <li class="prev_article"> <span>上一篇：</span><a href="http://blog.csdn.net/kaosini/article/details/6583578">一、WAP开发之UC的CSS支持</a></li> <li class="next_article"> <span>下一篇：</span><a href="http://blog.csdn.net/kaosini/article/details/6587543">.net及php判断手机还是电脑访问网站</a></li> </div> </div> <div id="ad_cen"></div> <script type="text/javascript"> new Ad(4, 'ad_cen'); </script> <div id="comment_title" class="panel_head">查看评论<a name="comments"></a></div> <div id="comment_list"></div> <div id="comment_bar"></div> <div id="comment_form"></div> <div class="announce">* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场<a name="reply"></a><a name="quote"></a></div> <script type="text/javascript"> var fileName = '6584044'; var commentscount = 0; var islock = false </script> <script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js?v=1.1"></script> <div id="ad_bot"></div> <script type="text/javascript"> new Ad(5, 'ad_bot'); </script> <div id="report_dialog"></div> <div class="clear"></div> </div> </div> <div id="side"> <div class="side"> <div id="panel_Profile" class="panel"> <ul class="panel_head"><span>个人资料</span></ul> <ul class="panel_body profile"> <div id="blog_userface"> <a href="http://my.csdn.net/kaosini" target="_blank"> <img src="http://avatar.csdn.net/4/0/4/1_kaosini.jpg" title="访问我的空间" style="max-width:90%"/> </a> <br /> <span><a href="http://my.csdn.net/kaosini" target="_blank">kaosini</a></span> </div> <div class="interact"> <!--<a href="#" class="attented" title="已关注"></a>-->

• 访问：5137次
• 积分：216分
• 排名：千里之外

• 原创：13篇
• 转载：21篇
• 译文：0篇
• 评论：3条

<script type="text/javascript"> var _blogger='kaosini'; $(document).ready(function () { $('#span_add_follow').click(function () { var url = "http://my.csdn.net/index.php/follow/do_follow?jsonpcallback=?"; $.getJSON(url, { "username": _blogger }, function (data) { if (data.succ == 1) { alert('关注成功！'); $('#span_add_follow').attr('class', 'attented').click(function () { return false; }); } else { alert(data.msg); } }); }); if (getUN().toLowerCase() == _blogger.toLowerCase()) { $('.interact').hide(); } }); function getUN() { var m = document.cookie.match(new RegExp("(^| )UserName=([^;]*)(;|$)")); if (m) return m[2]; else return ''; } </script>

文章搜索

文章分类

• Linux学习(10)
• WAP学习(3)
• Asp.net(2)
• 手机微博（WAP）(2)
• MongoDB(3)
• 页面前端(7)

文章存档

<!--归档统计-->
2012年05月(3)
2012年04月(4)
2011年12月(5)
2011年11月(1)
2011年10月(5)
2011年08月(1)
2011年07月(10)
2011年06月(5)

阅读排行

• mongodb的一些tips (503)
• Mongo linux下开机自启动，启动... (418)
• .net及php判断手机还是电脑访问网站 (336)
• Linux下查看mysql、apache... (251)
• 一、WAP开发之UC的CSS支持 (231)
• Linux安装服务自启动方法 (207)
• IIS配置需要登陆才能访问的目录权限 (195)
• 往Iphone里添加歌曲通过91助手 (194)
• C# 链接有访问权限的Mongodb的链... (160)
• Linux 文件、内容查找(递归) ，g... (150)

评论排行

• JS通过Get方式调用接口编码问题 (1)
• 一、手机微博之HTML5的本地存储 (1)
• IIS配置需要登陆才能访问的目录权限 (1)
• Linux下查看mysql、apache... (0)
• 二、手机微博之Learn新浪 (0)
• GB2312编码encodeURI()后... (0)
• mongodb的一些tips (0)
• 联想的老手机不能获得密码框的焦点的原因 (0)
• PS CS4 序列号永久使用 (0)
• Linux系统内存占用90%以上——解决... (0)

推荐文章

<script type="text/javascript" src="http://static.blog.csdn.net/scripts/ad.js"></script><script type="text/javascript"> new Ad(12, 'ad_commend'); </script>

最新评论

• JS通过Get方式调用接口编码问题

  ceal21: 好哦

• IIS配置需要登陆才能访问的目录权限

  lixueru0819:

• 一、手机微博之HTML5的本地存储

  rentj1: 不错，学习，学习