带有半透明边框的CSS线性渐变

Question

我正在使用带有半透明边框的线性渐变来创建模块和按钮等。使用（例如）rgba(0,0,0,0.1)作为边框颜色很方便，因为我可以在我的元素上设置任何背景颜色不得不再次担心边框颜色。

但是我注意到一个非常奇怪的效果 - 当与线性渐变背景结合使用时，浏览器使用元素填充框的高度来计算渐变的高度，这意味着它会在顶部和底部边缘重复，创造一个非常奇怪的效果：

以下是生成“实际”框的CSS：

.box {
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    border: 25px solid rgba(0,0,0,0.1);
    background-color: #eee;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); 
    margin-bottom: 20px;
}

现在我已经找到了一种解决方法，通过强制background-size为边框大小100％来实现所需的效果。这就是生成“所需”框（.box2）的原因：

.box2 {
    background-position: 0 center;
    background-size: auto calc(100% + 50px);
}

然而，这看起来有点黑客。

所以我的问题是：任何人都可以解释为什么会这样 - 我无法在任何地方找到它，有没有人有更整洁的解决方案？

这是我用来创建示例的JS Fiddle，它还包含一个带有实际图像背景的框以供比较：http://jsfiddle.net/29rgksgx/4/