本文介绍了创建中间有槽口的框(没有任何图像)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以创建一个像下面这样的盒子,其顶部和底部线条的中心都有凹口?(包括边框插图?)
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*/
}
这篇关于创建中间有槽口的框(没有任何图像)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!