IE9边界半径和背景梯度出血 [英] IE9 border-radius and background gradient bleeding

问题描述

IE9显然可以使用 border-radius 的CSS3标准定义来处理圆角。

IE9 is apparently able to handle rounded corners by using the CSS3 standard definition of border-radius.

如何支持边框半径和背景渐变？是的IE9是单独支持他们，但如果你混合两个梯度渗出圆角。

What about support for border radius and background gradient? Yes IE9 is to support them both separately, but if you mix the two the gradient bleeds out of the rounded corner.

我也看到奇怪的阴影在一个带圆角的框下显示为实心黑线。

I am also seeing strangeness with shadows showing as a solid black line under a box with rounded corners.

以下是IE9中显示的图片：

Here are the images shown in IE9:

推荐答案

下面是一个添加背景渐变的解决方案，使用数据URI创建一个半透明图像，覆盖任何背景颜色。我已经验证它被正确地裁剪到IE9的边框半径。这是比基于SVG的建议更轻的重量，但作为一个缺点，不是独立于解决方案。另一个优点：使用当前的HTML / CSS，不需要包装其他元素。

Here's one solution that adds a background gradient, using a data URI to create a semi-transparent image that overlays any background color. I've verified that it's clipped correctly to the border radius in IE9. This is lighter weight than SVG-based proposals but as a downside, is not resolution-independent. Another advantage: works with your current HTML/CSS and does not require wrapping with additional elements.

我通过网络搜索获取了一个随机的20x20渐变PNG，使用在线工具的数据URI。结果数据URI小于所有SVG混乱的CSS代码，更少的SVG本身！ （你可以有条件地应用这个条件到IE9只使用条件样式，浏览器特定的css类等）。当然，生成一个PNG适用于按钮大小的渐变，但不是页面大小的渐变！

I grabbed a random 20x20 gradient PNG via a web search, and converted it into a data URI using an online tool. The resulting data URI is smaller than the CSS code for all that SVG mess, much less the SVG itself! (You could apply this conditionally to IE9 only using conditional styles, browser-specific css classes, etc.) Of course, generating a PNG works great for button-sized gradients, but not page-sized gradients!

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;
}

这篇关于IE9边界半径和背景梯度出血的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！