如何解决 CSS 定位或溢出隐藏时，元素边框和内容之间出现缝隙的问题？

css 定位溢出隐藏边框和内容之前出现缝隙

在某些情况下，当使用定位或溢出隐藏 css 属性时，元素的边框和内容之间可能会出现缝隙。

原因

这种缝隙通常是因为尺寸非整数或非整倍缩放造成的。即使元素边框紧贴内部元素，该缝隙也可能出现。

解决方法

• 避免使用非整数或非整倍缩放的布局。
• 将背景应用于有边框的元素而不是内部元素。
• 在有边框的元素周围放置一个额外的 div 并对该 div 进行溢出隐藏。

其他消除缝隙的方法

• 在伪元素上添加边框：

目标元素 {
  position: relative;
  padding: 1px 3px 1px 1px;
}
目标元素::伪元素 {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #dea44d;
  border-radius: 9em;
  pointer-events: none;
}

• 使用轮廓：

目标元素 {
  margin: 1px;
  outline: 1px solid #dea44d;
}

• 使用阴影：

目标元素 {
  margin: 1px;
  box-shadow: 0 0 0 1px #DEA44D;
}

建议

• 设置较大的圆角以防止较小圆角导致的缝隙。