兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。
下面是当前五大浏览器对 gradient 的支持
<style type="text/css" media="screen">
#gradient {
width: 200px;
height: 200px;
/* 如果浏览器不支持渐变,使用图像作为背景 */
background: url(gradient.jpg);
/* Webkit: Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900));
/* Webkit: Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff6600, #339900);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6600, #339900);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6600, #339900);
/* IE 10 */
background: -ms-linear-gradient(top, #ff6600, #339900);
/* IE < 10 */
/* 注意:这一行必须写在最后 */
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);}
</style>
<div id="gradient"></div>
分享到:
相关推荐
CSS 设计指南学习小结
CSS实现背景颜色渐变,通过CSS滤镜使背景渐变,特殊情况下值得考虑的一个方案~
本次案例为(背景颜色渐变),运用css3就能实现背景颜色渐变的效果; HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
css背景样式渐变代码,好用实用,希望能帮到大家
这是一款可以在线生成css3背景渐变代码的jquery颜色选择器插件。用户可以调整滑块来调整颜色,可以使用查看按钮查看该背景渐变的css3代码。
这个小例子讲解了在不同浏览器下用css为元素做渐变背景的方法,希望能够对大家有所帮助。
这是一款使用纯CSS3制作的平滑过渡的渐变背景颜色示例效果。背景渐变效果分别使用CSS3圆形渐变和线性渐变来完成。
背景生成器CSS背景渐变生成器
使用div+css,实现的背景颜色的渐变,兼容谷歌,火狐,IE6以上浏览器
这是一款可以在线生成CSS3渐变背景颜色代码的可视化插件。你可以通过调节界面上给出的颜色、色相、饱和度和亮度滑块,以及渐变方向滑块来生成各种线性渐变,屏幕上会给出相应的CSS3线性渐变代码。
纯CSS3实现的背景颜色渐变动画特效源码.zip
一款非常漂亮的CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效,当鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,视觉效果相当好看。
CSS控制DIV层背景颜色渐变是一个相当不错的效果,看起来很夺目的,本文也尝试着实现一个类似这样的效果,感兴趣的朋友可不要错过了啊,或许本文所提供的对你学习css有所帮,好了话不多说切入正题
一种类似于淘宝编辑商品时选取商品颜色色系的样式源码 截图地址https://gitee.com/cyh92/StaticPage/blob/master/色系选择.jpg
在设置了背景颜色渐变后好不容易调成了全屏覆盖 但按下了F11的时候崩溃的世界开始了 所以这篇文章主要介绍CSS背景渐变色和自动全屏适应 背景渐变色 本文只介绍线性渐变 背景渐变相信大家也都不陌生先看下图 小编配...
html+css 实现登录页面,背景动态渐变是通过修改body的背景渐变色实现,按钮通过animation元素进行圆形扩散后逐渐消失并释放
CSS常用动画特效,CSS3新增背景CSS代码。颜色渐变,flex弹性布局,CSS常用动画特效CSS常用动画特效等
CSS3蓝色渐变几何背景特效是一款简单大气的文字背景样式布局代码。