最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x。下面我将介绍如何用 css 来完成该效果。
css3:linear-gradient
比如:黑色渐变到白色,代码如下:
.gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); }
ie 滤镜:filter
linear-gradient 在 ie9 以下是不支持的,所以对于 ie6 - ie8 我们可以使用滤镜来解决,代码如下:
.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); }
由于 filter 是 ie 的私有属性,所以我们需要针对 ie9 单独处理滤镜效果,代码如下:
:root {filter:none;}
总结:
综上所述,线性渐变的兼容写法如下:
.gradient{ background: #000000; background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); } :root .gradient{filter:none;}
css渐变用法:http://www.w3cplus.com/content/css3-gradient
相关推荐
css背景色渐变
CSS实现背景颜色渐变,通过CSS滤镜使背景渐变,特殊情况下值得考虑的一个方案~
CSS 设计指南学习小结
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,本例使用css3:linear-gradient及ie 滤镜:filter来实现
css浏览器兼容写法 如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000...
css背景样式渐变代码,好用实用,希望能帮到大家
这是一款可以在线生成css3背景渐变代码的jquery颜色选择器插件。用户可以调整滑块来调整颜色,可以使用查看按钮查看该背景渐变的css3代码。
各浏览器css兼容写法各浏览器css兼容写法
这个小例子讲解了在不同浏览器下用css为元素做渐变背景的方法,希望能够对大家有所帮助。
borderGradientcss-borderGradientcss-borderGradientcss-borderGradientcss-borderGradientcss 元素的渐变色练习css 元素的渐变色练习css 元素的渐变色练习css 元素的渐变色练习css 元素的渐变色练习css 元素的渐变...
css3棕色渐变导航菜单 css3棕色渐变导航菜单网页特效.zip
本次案例为(背景颜色渐变),运用css3就能实现背景颜色渐变的效果; HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
css背景颜色透明背景图片切换效果
使用css设置按钮边框的渐变色;使用css设置按钮边框的渐变色
超炫酷的CSS3进度条动画 背景色渐变
这是一款可以在线生成CSS3渐变背景颜色代码的可视化插件。你可以通过调节界面上给出的颜色、色相、饱和度和亮度滑块,以及渐变方向滑块来生成各种线性渐变,屏幕上会给出相应的CSS3线性渐变代码。
解决不通浏览器样式(CSS)兼容问题,符合W3C标准。
获取css样式 兼容写法