实现跨浏览器的背景渐变

/*背景渐变*/
.linear{
width:100%;
height:600px;
background-color:#fff;/*若浏览器不支持渐变,则显示这个背景色*/
background: -ms-linear-gradient(left,#dbecf6 0%,#C0D9ED 100%);/* IE11 */
background:-moz-linear-gradient(top,#dbecf6,#fdfdfd)no-repeat;/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#dbecf6), to(#fdfdfd))no-repeat;/*谷歌*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #dbecf6),color-stop(1, #fdfdfd))no-repeat;/* Safari*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#dbecf6‘, endColorstr=‘#fdfdfd‘)no-repeat; /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#dbecf6‘, endColorstr=‘#fdfdfd‘)"no-repeat; /* IE8 */
}
/*背景渐变结束*/

时间: 2024-08-25 03:42:21

实现跨浏览器的背景渐变的相关文章

CSS设置DIV背景色渐变显示--针对不同浏览器,背景渐变的兼容问问题

针对不同浏览器,背景渐变的兼容问问题! background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background:

[转]使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE

跨浏览器兼容性是网页制作永恒的难题.别看各浏览器厂商都努力在自己的浏览器中实现新式的css3标准特性,但都是以扩展样式的形式提供的, 所以在未来一段时间里,样式表里的-moz-,-webkit-,(-ms-,-o-)等等前缀将长期存在. 另外,虽说各家有志于扩张自己市场的浏览器厂商都提供了css3的新特性,但鉴于其老式版本的浏览器依然存在于用户的主机上(主要是微软旗下的ie6,7,8),除了考虑各家浏览器之间的兼容性外,我们还有必要向前兼容老式浏览器. 这些老式浏览器(低版本ie)对于css3的

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、

脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面设计 媒体动画 操作系统 网站运营 网络安全 YUI.Ext相关 prototype jquery dojo json lib_js js面向对象 extjs Mootools Seajs 其它 特色栏目: vbscript 正则表达式 javascript 批处理 服务器软件 素材下载 低价出售流

CSS3之firefox&amp;safari背景渐变之争 - [前端技术][转]

Firefox浏览器下的渐变背景  Firefox3.6 background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); chrome/Safari浏览器下的渐变背景实现   Safari4background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 综合 – 兼容性的渐变背景效果filter:alpha(o

跨浏览器开发:CSS

理解CSS盒子模型 如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CSS 盒子模型负责处理以下事情: ◆一个blcok(区块)级对象占据多大的空间 ◆该对象的边界,留白 ◆盒子的尺寸 ◆盒子与页面其它元素的相对位置 CSS 盒子模型有以下准则: ◆Block (区块)对象都是矩形 (事实上所有对象都如此) ◆其尺寸由 width, height, padding, b

CSS实现跨浏览器的box-shadow盒阴影效果(2)

一.前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章,本文虽然题目类似,但是核心部分是有差异的.前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,见下图: 您可以狠狠地点击这里:IE下阴影不自然demo 而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现.到底是如何实现的,究竟效果如果,请继续浏览. 二.浏览器纯爷们模式下的支持情况 CSS3 box-shadow属性基本上所有的现

转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律

http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html   原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧. 理解 CSS 盒子模型 如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理

跨浏览器的事件对象-------EventUtil 中的方法及用法

什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element