创建中间有槽口的框(没有任何图像) [英] Creating box with notches in the middle (without any images)

问题描述

是否可以创建一个像下面这样的盒子，其顶部和底部线条的中心都有凹口?(包括边框插图?)

Is it possible to create a box like the one below with notches in the center of the top and bottom line? (including the border inset?)

推荐答案

此解决方案使用一张图像(非常宽的图像)来覆盖盒子可能要占据的所有可能宽度.并使用边框图像.(当前在IE中不支持)

This solution is using an image (a very wide one) to cover all the possible width that a box will ever take. and using border-image. (Currently not supported in IE)

HTML:

<div class="SpecialBorder">
    <div class="Content">
        Some Content
    </div>
</div>

CSS:

.SpecialBorder
{
    border: 20px solid black; /* fallback for IE*/
    -moz-border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
    -o-border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
    -webkit-border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
    border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;

}
.Content
{
    background-color: #1d1d1d; /* same BG as the image*/
}

工作小提琴

这篇关于创建中间有槽口的框(没有任何图像)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！