Chrome DevTools中CSS边框大小不符：设置4px显示3.333px原因咨询

以下是几种常见导致设置4px边框但Chrome DevTools显示3.333px的情况：

• 元素或父元素被缩放
  如果你的div或者它的父元素设置了transform: scale(0.833)，或者使用了zoom: 83.3%这类缩放属性，元素的所有样式（包括边框）都会被等比例缩放。4px × 0.833 ≈ 3.333px，刚好匹配你看到的数值。

• 亚像素渲染的精确计算
  Chrome为了让页面文字和元素边缘显示更平滑，会启用亚像素渲染机制。当你的div在布局中处于非整数像素的位置，或者父容器的尺寸计算涉及到分数像素时，浏览器会对边框进行亚像素级的精确计算，DevTools会直接显示这个浮点数值，而非你设置的整数4px。

• 布局上下文导致的间接缩放
  比如父容器使用了flex/grid布局，且设置了flex-shrink或者百分比宽度，导致div被挤压变形，边框作为元素的一部分也会被等比例压缩，最终出现非整数的边框尺寸。

内容的提问来源于stack exchange，提问作者Hawkeyebrow