css - 边界位置

Question

我想尝试使用边框在 CSS 中实现一些东西，但它们似乎没有我想要的东西。在 Photoshop 中，当您添加描边(边框)时，您需要选择位置。外部、内部或中心。外面是整个边框环绕对象的地方。里面是它位于内部的位置(很明显)，中心是一半一半。

我想要一个位于中心的 2px 边框。所以它在外面显示 1px，在里面显示 1px。有没有办法用 CSS 做到这一点？我想我可以用某种 box-shadow 来做到这一点，但我对 CSS 中的阴影感到恐惧。

还有一个问题是必须是纯 CSS，所以我不能在上面放置图像。有人可以帮我解决这个问题吗。

谢谢。

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>

---

^{( 1 )} 由于上面的 fiddle 可能无法很好地展示解释，这里是相同的示例，其中包含两个彩色笔划和每个笔划的 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