CSS线性渐变 linear-gradient

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

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

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

<style>
.yangjunwei_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 yangjunwei_com"> </div>

如下图：