html - 具有半透明边框的 CSS 线性渐变

<分区>

我使用带有半透明边框的线性渐变来创建模块和按钮等。使用(例如)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);
}

然而，这似乎有点 hacky。

所以我的问题是:谁能解释为什么会这样——我在任何地方都找不到它的文档，有没有人有更简洁的解决方案？

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

最佳答案

您可以选择将哪个框用作背景的引用

选择 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>

关于html - 具有半透明边框的 CSS 线性渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32511103/

上一篇：javascript - D3圆环图文本居中

下一篇：html - 不同浏览器的输入和 anchor 标签大小不同(额外填充)

相关文章：

javascript - jQuery 切换列表菜单问题

添加另一个子菜单的 CSS 菜单示例

css - iframe 中的样式元素

html - 导航栏不会完全覆盖屏幕

javascript - 将日期列值与系统时钟进行比较

html - 如何使我的 Bootstrap 4 导航栏下拉菜单全宽？

javascript - HTML5 日期时间本地输入字段与 jQueryui 日期时间选择器

jquery - 使用 jQuery freezeframe 创建可打印图像

javascript - 在滚动时将类添加到 <li> 元素内的链接

html - CSS - 制作 div(显示 :inline-block) layout not change when shrinking screen