使用纯CSS，我如何获得完美（纯色，清晰）内边框（不是模糊的阴影效果）

Question

我进行了一些搜索，但所有相关帖子都在谈论box-shadow解决方案。它工作但它会使网页变慢。而且它也有点模糊。

有没有办法获得完美的内边框（实心和像素级清晰）

#a {
  border: 2px solid green;
  margin-bottom: 20px
}

#b {
  box-shadow: inset 2px 0 2px 0 #f00;
}

#a,
#b {
  height: 50px;
  padding: 5px
}

<div id="a">
  traditional border, very clear.
</div>
<div id="b">
  border-shadow, blurry
</div>

Answer 1

要将外边框转换为内边框，您只需在元素上设置box-sizing: border-box;，这可确保边框在为元素定义的宽度/高度内呈现。

＆＃13;

＆＃13;

#a,
#b {
  height: 50px;
  padding: 5px;
  border: 2px solid green;
  margin-bottom: 20px;
}

#b {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

＆＃13;

<div id="a">
  traditional (outer) border, very clear.
</div>
<div id="b">
  inner border, very clear.
</div>

＆＃13;

＆＃13;

＆＃13;