兼容当前五大浏览器的渐变颜色背景gradient的写法
发布时间：2014-08-08 10:25:56 作者：佚名 
我要评论
我要评论兼容多浏览器就要为每一个浏览器写对应的 CSS，太低版本的浏览器只能使用图片做背景，下面是当前五大浏览器对 gradient 的支持
经常有一些时候需要使用渐变背景，使用长条图片有点太不高大上了，于是自己写了个小例子，兼容多浏览器就要为每一个浏览器写对应的 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>
啥时没有IE6，啥时世界算太平啊。万恶的IE。
下面是当前五大浏览器对 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>
啥时没有IE6，啥时世界算太平啊。万恶的IE。
相关文章
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26- overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be2024-09-26
本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为2024-09-24CSS的:required和:optional伪类：如何增强表单字段的视觉识别
在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的2024-09-18
本文介绍了CSS中设置边框的几种主要属性,包括边框样式（如实线、虚线等）、边框宽度（可以单独设置每个方向的宽度）、边框颜色（支持单独为每个方向设置颜色）以及圆角边框2024-09-18
通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画2024-09-13CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)
在CSS中，可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器，对于其他浏览器，可采用JavaScript或CSS Fallback等方案,文2024-09-11
这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧2024-08-28
最新评论