iLeichun

今天分享一个CSS的线性渐变功能，比较舒服，比起用图片来，方便不少！！

要创建一个线性渐变，关键在于设置一个渐变的方向和渐变的起止颜色！

这里直接给出一个示例，兼容各大主流浏览器，其中IE用了滤镜！

<style>
.nuodou_com{/* 背景色渐变 兼容不同内核浏览器 */
    background:-webkit-gradient(linear,left top,left bottom,from(#ff0000),to(#0000ff));
    background:-moz-linear-gradient(top,#ff0000,#0000ff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=¹#ff0000¹,endColorstr=¹#0000ff¹);
    background:-o-linear-gradient(top,#ff0000,#0000ff);
    background:linear-gradient(top,#ff0000,#0000ff)
}

.box-border{ border:1px solid #ccc; width:200px; height:200px; line-height:30px; }
</style>

<div class="box-border nuodou_com"> </div>

如下图：

来源：http://www.nuodou.com/a/186.html