带有半透明边框的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/

- beercohol

---

在我回答的相关主题中，有一个详细的解释，说明为什么会发生这种情况（以及为什么vals答案中提到的属性可以解决它）。 - Harry

Answer 1

您可以选择哪个盒子作为背景的参考

选择border-box，它将按预期工作

您可以在边框内容和填充盒之间进行选择

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

<div class="box"></div>

- vals

---

太棒了，这就解决了问题！谢谢。 - beercohol