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;
}建议
- 设置较大的圆角以防止较小圆角导致的缝隙。
