您当前位置：首页 > web前端 > 特效 > CSS的线性渐变样式

CSS的线性渐变样式

来源：程序员人生发布时间：2014-07-14 22:52:23 阅读次数：4616次

CSS如何设置线性渐变样式呢，当然呢，个人觉得还是不要这样设置，因为涉及到兼容性非常困在，常规做法是直接用ps画一个渐变图片，然后取一个像素款，到时候再设置背景y轴重复即可。
如果非要用纯CSS设置线性渐变样式怎么处理呢，代码如下：

.wfuyu{

height: 50px;

background-color: #d5d5d5;

background-image: -webkit-linear-gradient(#000, #fff);/*Webkit*/

background-image: -moz-linear-gradient(#000, #fff);

background-image: -ms-linear-gradient(#000, #fff);

background-image: -o-linear-gradient(#000, #fff);/*Opera*/

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000, endColorstr=#fff);/*IE<9>*/

}

</style>

<body>

<div class="wfuyu"></div>

效果如下图
程序员人生

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 php监控别人微博是否更新

下一篇 css样式多背景在同一页面的设置方法

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点