Question

我想尝试使用边框在CSS中实现某些东西，但它们似乎没有我想要的东西。在Photoshop中，添加笔触（边框）时，可以选择位置。外部，内部或中心。外面是整个边界环绕物体的地方。里面是它位于内部（显然），中心是一半和一半。

我想要一个位于中心的2px边框。因此它显示在外部1px和内部1px。无论如何用CSS做到这一点？我想我可以用某种box-shadow做到这一点，但我对CSS中的阴影很可怕。

还有必须是纯CSS的问题，所以我不能在它上面留下图像。有人可以帮我解决这个问题。

感谢。

Answer 1

由于border表示外部笔划，因此可以使用outline css属性，outline-offset设置为负值以获得内部{ {1}} stroke ^（1） JS Fiddle

＆＃13;

1px

＆＃13;

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 */
}

＆＃13;

^（1）由于上述小提琴可能无法充分证明这些解释，所以这里有两个彩色笔画的同一个例子，每个笔画都有<div id="test"></div>而不是{{ 1}} 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

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>

Answer 3

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

position: relative;
left: 2px;

您可能需要进行其他更正，例如将容器的宽度减少2px。

边境位置

3 个答案: