半径和背景梯度出血
IE9显然能够通过使用border-radius的CSS3标准定义来处理圆角。
那么支持边界半径和背景渐变呢？ 是的IE9是分别支持他们，但如果你混合两个梯度出血圆角。
我也看到阴影显示为圆角下的黑色实线。
以下是IE9中显示的图像：
我该如何解决这个问题？
以下是一个添加背景渐变的解决方案，使用数据URI创建覆盖任何背景色的半透明图像。 我已验证它在IE9中的边框半径上正确剪辑。 这比基于SVG的提议更轻，但是作为缺点，不是与解决方案无关的。 另一个优点：适用于您当前的HTML / CSS，并且不需要使用其他元素进行包装。
我通过网络搜索抓取了一个随机20x20渐变PNG，并使用在线工具将其转换为数据URI。 得到的数据URI比所有SVG混乱的CSS代码小，更不用说SVG本身！ （您可以仅使用条件样式，特定于浏览器的CSS类等有条件地将其应用于IE9）。当然，生成PNG非常适用于按钮大小的渐变，但不适用于页面大小的渐变！
HTML：
<span class="button">This is a button</span>
CSS：
span.button {
padding: 5px 10px;
border-radius: 10px;
background-color: orange;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
background-size: 100% 100%;
border: 2px solid white;
color: white;
}
我也一直在处理这个问题。 另一个“解决方案”是在具有渐变和圆角的物品周围添加一个div。 使该div具有相同的高度，宽度和圆角值。 将溢出设置为隐藏。 这基本上只是一个面具，但它适用于我。
HTML：
<div class="mask roundedCorners">
<div class="roundedCorners gradient">
Content
</div>
</div>
CSS：
.mask
{
overflow: hidden;
}
.roundedCorners
{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.gradient
{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}
我认为值得一提的是，在许多情况下，您可以使用嵌入的阴影来“伪造”渐变效果，并避免IE9中的丑陋边缘。 这对于按钮尤其适用。
看到这个例子：http://jsfiddle.net/jancbeck/CJPPW/31/
链接地址: http://www.djcxy.com/p/28099.html