边框位置

Question

我想使用边框实现某些CSS效果，但似乎没有我想要的东西。在Photoshop中，当您添加描边（边框）时，您可以选择位置。外部、内部或居中。外部是整个边框包装物体的地方。内部是它位于内部的地方（显然是），而中心则是一半一半。

我想要一个位于中心的2px边框。因此，它会显示1px的外部和1px的内部。有没有办法用CSS做到这一点？我想我可以用某种类型的box-shadow来实现它，但我在CSS中很糟糕。

还有一个问题，必须是纯CSS，所以我不能放置图像。有人能帮帮我吗？

谢谢。

- Spedwards

---

有什么特别的原因吗？这样做会对某些图像添加额外的效果或类似的东西吗？ - Harry

@Spedwards，您所说的“内部”和“外部”意思不是很清楚，提供示例代码会更有帮助。 - Joey M-H

@Michael_B 这是我刚刚在 Photoshop 中制作的一个示例。我想要一个“中心”边框，只不过要小得多。http://imgur.com/a/NAVoC - Spedwards

Answer 1

有一个解决方法，由于border表示外边框，您可以利用outline CSS属性，并将outline-offset设置为负值以获得内部的1px描边^{（ 1 ）}JS Fiddle

body {
  padding-top: 10px;
}
#test {
  width: 250px;
  height: 200px;
  background-color: orange;
  margin: 0 auto;
  border: 1px navy solid;  /* outer stroke */
  outline: 1px navy solid;  /* inner stroke */
  outline-offset: -2px;  /* negative border width + outline width */
}

<div id="test"></div>

---

⁽¹⁾ 由于上述示例可能不能很好地说明解释，因此这是相同的示例，其中有两个彩色笔画，并且每个笔画的宽度为4px而不是1px。 Demo Fiddle

资源：

http://caniuse.com/#search=outline

https://developer.mozilla.org/en/docs/Web/CSS/outline-offset

http://www.w3schools.com/cssref/css3_pr_outline-offset.asp

https://davidwalsh.name/outline-offset

- Mi-Creativity

---

问题在于“离线-左”这样的东西不存在，所以如果你只需要一边，那么这个解决方案是不可行的。在我的情况下，我只是微调了容器来模拟它。我有点走题了 - 但在CSS中总是会有某些东西。一些限制、副作用等。他们是故意这样做的吗？ - Rolf

@Rolf，抱歉回复晚了，但我相信您可以通过为元素仅设置border-left，使用::before和::after伪元素来实现它。 - Mi-Creativity

这个fiddle https://jsfiddle.net/Mi_Creativity/otmauy71/ 显示了内部和外部描边旁边的额外左边框.. 而这个其他的fiddle https://jsfiddle.net/Mi_Creativity/gtkdjh69/3/ 只显示了带有左边框的外部描边.. 请注意，您可以使用这种技术来创建任何边框或甚至多边框。 - Mi-Creativity

Answer 2

也许可以使用适当大小的绝对定位伪元素来实现？

div {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em auto;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  top:-6px;
  left: -6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border:12px solid rgba(255,0,0,0.5)
}

<div></div>

- Paulie_D

Answer 3

您可以微调容器，使其看起来像是内边框。例如，如果您有一个左边框为2px，并希望它显示为内边框，您只需将整个容器向右偏移，如下所示：

position: relative;
left: 2px;

你可能需要进行其他更正，例如通过2px减小容器的宽度。

- Rolf