【发布时间】：2016-08-12 15:41:08
【问题描述】：
我一直在用一些嵌套的 div 测试扩展/投影边框的想法，下面有一个工作示例。
基本上，我想要实现的是垂直和水平边框延伸到盒子外面，里面有内容。有点像草拟的样子。如果可能的话，我希望它能够完全响应。
在我的代码中，我设置了负边距的高度，以便获得我在视觉上寻找的效果，但对于我想要做的事情来说，我的标记似乎过于臃肿。它横向响应，但纵向我只是隐藏了溢出。
这样做时我脑海中闪过的另一个想法是有 4 个 div，每个边框边 1 个（上、右、下、左），然后将每个 div 偏移一定量以达到效果。有点像一个“摇晃”的 div 集群。这 4 个 div 将由父容器携带并响应。
这可以比我在小提琴中做的更简单吗？有没有办法让它在垂直和水平上都灵活（完全响应）？是否有可能在每个边框边都有可变的扩展名（例如一侧为 2px，另一侧为 4px）？
废话不多说，这就是我目前所拥有的：
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
/* text-align: center; */
}
.container {
margin: 50px auto 0;
padding: 0;
width: 75%;
height: 200px;
position: relative;
}
.box-vert {
margin: -10px 0;
padding: 0;
overflow: visible;
height: 200px;
position: absolute;
border: 1px solid #C5C5C5;
border-top: none;
border-bottom: none;
}
.box-horz {
height: 180px;
margin: 10px -10px;
overflow: visible;
border: 1px solid #C5C5C5;
border-left: none;
border-right: none;
padding: 0;
}
.box-inner {
margin: 0 10px;
padding: 20px;
background-color: #ECECEC;
height: 140px;
float: left;
overflow: hidden;
}
.box-inner h1 {
margin: 0 0 10px;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 3px;
font-size: 30px;
color: #009688;
}
.box-inner p {
margin: 0;
line-height: 1.4;
font-size: 14px;
color: #666;
}<div class="container">
<div class="box-vert">
<div class="box-horz">
<div class="box-inner">
<h1>Title Text Here</h1>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
</div>【问题讨论】：
-
您可以制作一个图像并将其用作边框并重复它。
标签： html css border css-shapes