具有透明层的 div 周围的多个边框答案

【问题标题】：Multiple borders around a div with a transparent layer具有透明层的 div 周围的多个边框
【发布时间】：2013-08-14 05:31:58
【问题描述】：

我正在尝试创建一个带有 3 层边框的按钮，中间层显示包含 div 的背景。例子值一千字，所以你去吧

http://jsfiddle.net/e5Sxt/2/

html

<div id="content">
    <p>Generic Content</p>
    <button class="button">Search</button>
</div>

css

#content{
    width: 500px;
    height: 500px;
    background-color: black;
    padding: 50px;
    color: white;
}

button{
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    background-color: #333;
    box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
    border: none;
    cursor: pointer;
}

红色框阴影是包含 div 的黑色应该穿过的地方。如果该图层的 box-shadow 设置为透明，则其下方的 box-shadow 会显示出来。

到目前为止，我已经尝试过使用轮廓、边框和框阴影无济于事。截至目前，我认为我必须将按钮包装在另一个带有外边框和填充以显示背景的 div 中，但我想看看是否有人可以在不添加另一个 html 元素的情况下做到这一点。

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

答案取决于您需要支持哪些浏览器（以及您是否对旧版浏览器的后备解决方案感到满意）。

有一个名为 border-image 的 CSS 功能，坦率地说，它几乎可以为边框做任何你能想到的事情。使用这种样式，您可以很容易地实现这种效果。

使用border-image，您可以简单地指定一个带有两种颜色和透明中间部分的小图像。任务完成。

在此处了解有关边框图像的更多信息：http://css-tricks.com/understanding-border-image/

但是...有一个很大的缺点：浏览器支持。 border-image 是 CSS 规范中一个相对较新的补充。 Firefox 和 Chrome 用户应该没问题，但 IE 用户错过了——这个功能甚至没有进入 IE10。

完整的浏览器支持细节可以在这里找到：http://caniuse.com/#search=border-image

如果浏览器对border-image 的不良支持足以让你放弃这个想法，那么另一个可行的答案是使用:before 或:after CSS 选择器来创建位于主元素后面的伪元素。这将有一个透明的背景，尺寸略大于主要元素，并有自己的边框。这将给出您正在寻找的三重边框的外观。

当然，如果您还没有将:before 和:after 用于其他用途，则只能使用此解决方案。

希望能给你一些想法。

【讨论】：

使用边框图像的有趣想法。不幸的是，这在 IE 中不起作用，所以它不是一个可行的选择。我将尝试使用之前和之后的 CSS 选择器，就像你提到的那样，看看我能做什么并让你知道。谢谢！
@Clayton - 是的，IE 角度对于border-image 来说通常是一个杀手。这就是为什么你并没有真正看到它在使用中的原因。它在 IE11 中，所以希望最终事情最终会改变。同时，我希望:before / :after 解决方案对您有用。
@Spudley 你能解释一下如何使用:before / :after 解决方案吗？我不清楚如何使用它们来添加额外的边框。代码或 jsFiddle 会有很大帮助。我尝试了.box:before { border: 1px solid #000 } 并尝试添加填充或宽度等，但也没有帮助，我现在有点猜测。
@SuckerForMayhem - here's a quick example for you to play with。希望它能做你想做的。
很高兴你发布了这个，因为我最初必须将边框的宽度和高度显式设置为比 div 大一点。您的方式更好，效果更佳！

【解决方案2】：

不幸的是，我认为唯一的方法是使用包装器。我不确定是否可以通过按钮背景获得透明度。

虽然，如果你知道背景颜色，你显然可以在边框中使用它，但这当然不适用于背景渐变。

这是一个建议的 jsFiddle，显示知道颜色，另一个使用包装器：

http://jsfiddle.net/eD6xy/

HTML：

<div class="box one-div">(1 div, know color)</div>

<div class="two-div">
  <div class="box">(2 divs, pure transparent)</div>
</div>

CSS：

/* 
  With one div, works fine with a constant color (#abc)
  But with gradient, probably won't match up correctly
*/
.one-div {
  margin: 15px 10px;
  border: 5px solid blue;
  box-shadow: 0 0 0 5px #abc,
              0 0 0 10px red;
}

.two-div {
  margin-top: 30px;
  padding: 5px;
  border: 5px solid red;
}

.two-div > .box {
  border: 5px solid blue;
}

【讨论】：