使用CSS制作小边框

Question

我一直在寻找一个很好的方法来制作一个像这个问题所包含的页脚。

模糊的文本框已经完成了，我已经使用了一些带有浮动的盒子，这不是太大的问题，但是我无法找到一种方法来制作那些小边框而不添加整体div并将它们夹在其他白色背景之间。

我到目前为止的代码如下：

.textblock {
  float: left;
  width: 200px;
  height: auto;
  background-color: #ccc;
  overflow: break-word;
  padding: 2px;
}

<div class="textblock">
  some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/><br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/>
</div>

<div class="textblock">
  some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/> some text here<br/>

</div>

Answer 1

您可以使用:after或:before伪类。我建议您使用两个不同的类，一个用于顶行.line-top，另一个用于右行.line-right。

Stack Snippet

＆＃13;

＆＃13;

.textblock {
  font: 14px Verdana;
  float: left;
  width: 200px;
  height: auto;
  background-color: #ccc;
  padding: 10px;
}

.line-right,
.line-top {
  position: relative;
}

.line-right:after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: #ffffff;
  right: 5px;
  z-index: 9;
}

.line-top:after {
  content: "";
  position: absolute;
  left: 30px;
  right: 40px;
  height: 1px;
  background: #ffffff;
  top: -10px;
  z-index: 9;
}

.mt20 {
  margin-top: 20px;
}

＆＃13;

<div class="textblock line-right">
  some text here some text here some text here some text here
  <div class="mt20 line-top">
    some text here some text here some text here some text here
  </div>
</div>
<div class="textblock">
  some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</div>

＆＃13;

＆＃13;

＆＃13;