HTML是边框的线性是,具有半透明边框的CSS线性渐变

beercohol

4

html

css3

我正在使用带有半透明边框的线性渐变来创建模块和按钮等.使用(例如)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-size100%+边框大小,我可以实现所需的效果.这就是生成"所需"框(.box2)的原因:

.box2 {

background-position: 0 center;

background-size: auto calc(100% + 50px);

}

然而,这似乎有点hacky.

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

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