IE11 Box-shadow spread和border-radius

Question

我在IE11中看到了一个渲染问题，当涉及到具有圆形边框的元素上的多个框阴影时。在这个用例中，我尝试过不使用边框，只使用了框阴影来为按钮创建一些清晰的轮廓。

box-shadow: 0 0 0 1px #000000 inset, 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
background-color: blue;
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none;

这个CSS应该创建一个黑色轮廓和白色内联的框，如下所示：

到目前为止一切顺利。当我还添加一些border-radius时，Firefox和Chrome中的结果看起来非常像：

这是期望的效果。但IE（11）不知何故使这很奇怪：

边界半径似乎已关闭。 这是一个jsFiddle演示：http://jsfiddle.net/ebjWB/1/

有人知道我可以对这个模糊边框做些什么，还是我必须使用实际尺寸的边框或阴影？

Answer 1

由于box-shadow未向元素（AFAIK）添加其他维度，因此您只需删除inset属性即可。

JSfiddle

a
{
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 2px #000000  ;
    background-color: blue;
    color: white;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
}

Answer 2

您可以尝试将border与box-shadow混合使用。我不能保证它适用于每个浏览器，但它确实修复了IE11中的角落。 （请注意我减少了填充以补偿边界）

a {
    box-shadow: 0 0 0 1px #000;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background-color: blue;
    color: white;
    display: inline-block;
    padding: 3px 8px;
    text-decoration: none;
}