如何在边缘中央设置边框？（不是在外部或内部）

Question

我希望有像这样的东西：（假设边框的height与div相同，我将其画得更长只是为了澄清）。

正如您所知，边框默认位于 div 的外部，我也可以将其更改为 内部 of div。但现在我的问题是如何将其放置于

中心

（边缘）。我该怎么做呢？

---

编辑：还有，我怎样可以设置一个边框在 div 上面？就像这样：

- Shafizadeh

Answer 1

您也可以使用伪元素创建该布局。使用%值将使伪元素随父元素一起增长和缩小。

CSS盒模型的设计是在内容周围放置边框。没有办法通过黑客手段来显示边框开始点之后的内容。

div后面的伪元素：

.box {
  width: 150px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}
.box::before {
  background: #5E5E5E;
  content: " ";
  display: block;
  height: 120%;
  left: -5%;
  position: absolute;
  top: -10%;
  width: 10%;
  z-index: -1; /* Place it behind the box */
}

<div class="box"></div>

在div的顶部放置伪元素：

.box {
  width: 150px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}
.box::before {
  background: #5E5E5E;
  content: " ";
  display: block;
  height: 90%;
  left: -5%;
  position: absolute;
  top: 5%;
  width: 10%;
}

<div class="box"></div>

- m4n0

---

哇，我为什么没想到呢？我只是使用了一个普通的元素。这样可以少写一行HTML代码。不错！ - Jonathan Lam

我也喜欢你使用百分比的方式。很动态！ - Jonathan Lam

很简单。你只需要移除负的 z-index 并调整长度值即可。 - m4n0

抱歉再次询问，看，我总是在使用::after和::before时遇到问题，您能否告诉我为什么在这种情况下使用了::before？（以及何时应该使用::after）？ - Shafizadeh

没有太大的区别。可以使用:after来实现相同的解决方案。基本上，CSS为您提供了两个虚拟元素供您使用。::after将放置在元素内的内容之后，而::before将放置在内容之前。请查看此图像：https://cdn.css-tricks.com/wp-content/uploads/2011/06/multiplecanvases.jpg 在框中添加一些内容，打开Chrome开发工具，并检查：before和：after伪元素相对于内容的位置。 - m4n0

Answer 2

我认为唯一的方法是创建第二个元素并将其放在第一个元素后面。据我所知，没有办法创建一个仅超出边缘的边框。 HTML

<div id="content">
    <div id="border"></div>
</div>

CSS

div#content {
    width: 200px;
    height: 200px;
    margin-left: 40px;
    margin-top: 40px;
    background-color: blue;
    position: relative;
}
div#border {
    position: relative;
    left: -20px;
    top: -20px;
    height: 240px;
    width: 40px;
    background-color: green;
    z-index: -1;
}

在JSFiddle上查看实际示例。

- Jonathan Lam