transparency - IE11 中的边框图像透明度错误

Question

我在将图像文件设置为边框背景的元素上使用 border-image 属性。边框图像文件具有透明度，并且在 Chrome 和 Firefox 中可以正常工作。

但是，在 IE11 中，透明区域会“覆盖”边框下的背景图像。有办法解决吗？我在具有各种背景图像的元素上使用相同的边框图像，因此我不想为每个元素创建单独的非透明边框图像。

这是我目前所拥有的:

body {
background: #000;  
}

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
  width: 300px;
  height: 80px;
  border-style: solid;
  border-width: 14px;
  border-radius: 5px;
}

<div></div>

渲染对比

边框图像文件:

背景图像文件:

Answer 1

定义 border-image-width 而不是 border-width 解决了 IE11 中的问题。如果您想设置回退，border-style: dashed 似乎提供了更一致的行为。

这似乎是错误的行为，但可能是浏览器行为的一个简单差异:

• 在 Chrome 中，border-width: 14px 每边增加 14px 并且 没有 border-style 。当设置了 border-image-width 时，border-style 没有影响。

• 在 IE11 中，border-width: 14px 不会每边增加 14px，除非设置了 border-style。 border-style 确实会影响 border-image 的定位，但仅当设置为 solid 时才会如此。

IE11截图

工作示例

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;  
  border-image-width: 14px;
  width: 300px;
  height: 80px;
  border-radius: 5px;
}

<div></div>