html - IE9 圆 Angular 和 CSS 背景渐变共存？

Question

我在 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');

这样，渐变就可以了，但我的圆 Angular 消失了。

所以我尝试为过滤器声明添加一个条件。

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

这带回了我的 Angular 落，但渐变消失了。

Answer 1

渐变会在 IE9 中出现圆 Angular ，所以现在最好的解决方案是添加一个额外的 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/

这一个用于创建边界半径: http://border-radius.com/