html – IE9圆角和CSS背景渐变生活在一起?
发布时间:2020-12-14 21:27:45 所属栏目:资源 来源:网络整理
导读:我在IE9中遇到了一个奇怪的事情,试图得到一个背景渐变显示。 基本上我正在应用多个类到一个容器对象。 div class="gradient corners"/div 使用这个CSS。 .gradient {background-color: #96A7C5;background-image: -webkit-gradient(linear,left bottom,left
我在IE9中遇到了一个奇怪的事情,试图得到一个背景渐变显示。
基本上我正在应用多个类到一个容器对象。 <div class="gradient corners"></div> 使用这个CSS。 .gradient { background-color: #96A7C5; background-image: -webkit-gradient( linear,left bottom,left top,color-stop(0.19,#6C86AD),color-stop(0.6,#96A7C5) ); background-image: -moz-linear-gradient( center bottom,#75A33A 19%,#8DC447 60% ); .corners { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 要在IE中获得渐变,我将过滤器垃圾应用到我的.gradient类。 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447',endColorstr='#75A33A'); 有了这个渐变效果,但是我的圆角就消失了。 所以我尝试放置过滤器声明的条件。 <!--[if IE]> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447',endColorstr='#75A33A'); <![endif]--> 这带回了我的角落,但渐渐消失。 解决方法
渐变将出来在IE9的圆角,所以现在最好的解决方案添加一个额外的div:
<div class="corners"><div class="gradient"></div></div> 并隐藏.corners的溢出 .corners { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; } 我推荐这个类似Photoshop的工具来创建跨浏览器渐变:http://www.colorzilla.com/gradient-editor/ 而这一个创建border-radius: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |