为何存在缝隙?
当非整数缩放或非整数倍缩放时,即使是普通的嵌套 div 元素,在内部 div 和外部 div 的边框紧贴情况下,也会出现这种缝隙。
处理缝隙的解决方法
消除缝隙的其他方法
将 border 添加到伪元素:
目标元素 { 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; }
或
目标元素 { padding: 1px 3px 1px 1px; outline: 1px solid #dea44d; outline-offset: -1px; }
使用阴影:
目标元素 { margin: 1px; box-shadow: 0 0 0 1px #dea44d; }
或
目标元素 { padding: 1px 3px 1px 1px; box-shadow: 0 0 0 1px #DEA44D inset; }
建议将圆角稍大一些,因为这样可以更好地隐藏缝隙。