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>

如下图: