兼容各浏览器的CSS倒影效果
- - CSDN博客推荐文章无需flash，完全用css就可以做出超炫的图片倒影效果. 网上流传很多种版本，经过本人的一番研究，做成能够兼容firefox、chrome、IE等各主流浏览器的版本，跟大家分享一下. 指的是firefox、chrome和IE9. 新浏览器都支持CSS3新添的transform属性，所以实现倒影效果非常简单.
兼容各浏览器的CSS倒影效果
标签：
浏览器
css
效果
| 发表时间：2012-12-27 01:47 | 作者：afeiqiang
出处：http://blog.csdn.net
无需flash，完全用css就可以做出超炫的图片倒影效果。网上流传很多种版本，经过本人的一番研究，做成能够兼容firefox、chrome、IE等各主流浏览器的版本，跟大家分享一下。最终完成的效果
新浏览器的实现
指的是firefox、chrome和IE9。新浏览器都支持CSS3新添的transform属性，所以实现倒影效果非常简单。从下面的代码看到，各家浏览器对transform的实现有点不同
-webkit-transform: scaleY(-1); /* webkit内核浏览器的实现，例如safari */
-moz-transform: scaleY(-1); /* firefox 的实现 */
-ms-transform: scaleY(-1); /* IE 的实现 */
-o-transform: scaleY(-1); /* Opera的实现 */
-moz-transform: scaleY(-1); /* firefox 的实现 */
-ms-transform: scaleY(-1); /* IE 的实现 */
-o-transform: scaleY(-1); /* Opera的实现 */
HTML
<div class="wrap">
<div class="image"><img src="1.jpg" /></div>
<div class="down">
<div class="reflection"></div>
<div class="overlay"></div>
</div>
</div> CSS
body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:alpha(opacity='50');
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
} 在倒转的图片上面还加了一个DIV.overlay层，做出渐变的效果，使倒影看起来更真实。
兼容旧浏览器的实现
考虑到还有相当多的人在使用旧版浏览器，程序员绞尽脑汁为这部分人做兼容。这里指的是IE7/IE8。IE6怎么办？提示用户升级浏览器吧。
旧IE不支持transform属性，可以使用滤镜 filter:flipv 来生成图片倒转，但会跟IE9的transform冲突。所以要用到各种 hack 来解决。修改后的CSS如下，添加了IE9 hack，覆盖掉上面的filter:flipv的属性。
body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:flipv alpha(opacity='50'); /*ALL IE*/
}
@media all and (min-width:0) {
.reflection{filter:alpha(opacity='50') \0/;} /*IE9*/
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
} 运行一下，在各版本的浏览器能看到最终的效果了。
作者：afeiqiang 发表于2012-12-27 1:47:25 原文链接
阅读：67 评论：0 查看评论
相关 [浏览器 css 效果] 推荐：
Javascript和CSS浏览器兼容总结
- Keel - ITeye资讯频道这篇文章重点总结了Javascript和CSS浏览器兼容性问题. document.form.item 问题. 代码中存在 document.formName.item(“itemName”). 这样的语句，不能在FIREFOX下运行. 改用 document.formName.elements["elementName"].
CSS对浏览器的兼容性
- - CSDN博客Web前端推荐文章从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码. 而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名，并且需要写到页面的最上面. input、br、img等为常用自闭合标签，需要加入“/”进行闭合，例如“”；其他闭合标签需要进行闭合，例如“
....
”. 浏览器大 PK，用 CSS 画哆啦A梦
- jary - 谷奥——探寻谷歌的奥秘某日本高手用 css3 画了机器猫哆啦A梦. 点击这里进入查看具体的现实效果. 如果你查看页面源代码的话会发现这一切全部是css写的. 有意思的是由于不同的浏览器对 css3 的支持程度不同，效果也大不相同，上面即是不同的浏览器对比图：. 四个浏览里面 Chrome 的支持度最高，不仅圆角、阴影一应俱全，甚至连眼睛都还会动 @@；Firefox 3.6 次之，除了眼睛不会动之外都和 Chrome 相当；Opera 则是少了阴影；至于 IE8… 呃… IE9 什么时候出来.
前端设计中的浏览器CSS Hack汇总
- Myheimu - UED TEAM,用户体验设计,web前端开发CSS Hack是我们解决浏览器兼容性（尤其是IE各版本）问题的常用手段. CSS Hack的手法可以说是五花八门，使用时经常混淆. js代码
/***** Selector Hacks ******/. /* IE6及更低版本浏览器 */. /* IE8, FF, Saf, Opera (除了IE 6、7的所有浏览器) */.
css 控制div高度自适应浏览器的高度
- - 博客园_首页css 控制div高度自适应浏览器的高度. 20 这里是内容容这里是内容. 25 这里是内容这里是内容. 35 这里是内容这里是内容. 43 这里是内容这里是内容. 48 这里是内容这里是内容. 55 这里是内容容这里是内容. 57 这里是内容这里是内容. 64 这里是内容容这里是内容.
Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS
- - 博客园_梦想天空 Conditioniz 是一个快速、轻量级（3KB）的 JavaScript 工具，用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件. Conditioniz 从它的 jQuery 前身重建，现在速度要快50%. 结合类名添加和 Conditionizr 集成的脚本和样式加载功能，允许你为不同的浏览器指定想加载的脚本和样式.
现代浏览器性能优化-CSS篇
- - SegmentFault 最新的文章我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以 在这里观看. 众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到 中，防止在CSS还没加载完，DOM就已经绘制出来了，造成CSS加载完成后的重绘. 那在现代浏览器中我们有没有办法提高首屏渲染速度那.
【Web 开发必备】 史上最全的浏览器 CSS & JS Hack 手册
- - 博客园_首页 浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异. 因此，浏览器兼容成为前端开发人员的必备技能. 如果有一份浏览器 Hack 手册，那查询起来就方便多了. 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack，记得推荐和分享啊.
浏览器加载和渲染html的顺序-css渲染效率的探究
- - CSDN博客互联网推荐文章1.浏览器加载和渲染html的顺序. 1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的. 2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）. 3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载.