我在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 overflow hidden
.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
我推荐使用这种类似于Photoshop的工具来创建跨浏览器的渐变:http://www.colorzilla.com/gradient-editor/
并创建边界半径:
http://border-radius.com/
关于html - IE9圆 Angular 和CSS背景渐变在一起吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6130235/