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

问题描述：

我试图创建一个按钮，其周围有3层边框，中间层显示包含div的背景。

I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go

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的黑色。

The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.

我已经尝试过使用轮廓，边框和框阴影到目前为止没有用。到目前为止，我想我将必须将按钮包装在另一个div与外部边框和一个padding来显示背景，但想看看是否有人可以做这个没有添加另一个html元素。

I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.

谢谢！

答

答案取决于您需要支持哪些浏览器

The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).

有一个名为 border-image $ c $的CSS功能c>，坦白地说，可以做任何你可以想到的边界。

There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.

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

With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.

点击此处了解有关边框图片的详情： http://css-tricks.com/understanding-border-image/

Learn more about border image here: http://css-tricks.com/understanding-border-image/

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

However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.

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

Full browser support details can be found here: http://caniuse.com/#search=border-image

如果浏览器对 border-image 支持的浏览器支持足以杀死这个想法，那么另一个可行的答案是使用：before 或：之后 CSS选择器来创建位于主元素后面的伪元素。这将有一个透明的背景，尺寸略大于主要元素和它自己的边框。

If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.

当然，你只能使用这个解决方案，如果你还没有使用：之前和：之后

Of course, you can only use this solution if you aren't already using :before and :after for something else.

希望给你一些想法。

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

相关推荐