1

我正在尝试创建一个带有 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 元素的情况下做到这一点。

谢谢！

4

2 回答 2

2

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

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

使用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或:afterCSS 选择器来创建一个位于主元素后面的伪元素。这将有一个透明的背景，大小比主要元素略大，并且有自己的边框。这将给出您正在寻找的三重边框的外观。

当然，如果您还没有使用此解决方案，则只能使用此解决:before方案:after。

希望能给你一些想法。

于 2013-08-13T21:31:58.993 回答
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;
}
于 2013-08-13T21:03:00.640 回答