CSS:如何在盒子模型上显示边缘对用户的位置

Question

考虑以下:

我正在编写一个调试类来显示页面上元素的位置.我想显示上方的边缘(虚线外),但是我意识到我不能使用边框,因为这是边缘内边缘.我怎样才能做到这一点？

Answer 1

你可能最好设置一个outline与outline-offset.outline就像边框一样,但不占用布局中的任何空间,并且具有稍微不同的规则集.给定div1px边框和10px边距,你可以添加这样的轮廓:

div {
  border: 1px solid black;
  margin: 10px;
  outline: 1px solid red;
  outline-offset: 10px;
}

有关MDN的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

不幸的outline-offset是IE不支持.如果你需要支持那么你必须按照其他答案下去psuedoelement路线.