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