Question

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

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元素的情况下执行此操作。

谢谢！

Answer 1

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

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

这是一个建议的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;
}

Answer 2

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

有一个名为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进行其他操作，则只能使用此解决方案。

希望能给你一些想法。

带有透明层的div周围的多个边框

2 个答案: