• 注册
热门标签
↑ 收起导航

CSS线性渐变 linear-gradient

今天分享一个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://yangjunwei.com/a/186.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册