CSS缩放后边框与内容间出现白线的问题求解

问题场景 #

我做了一个简单示例：

• 外层是带黑色边框的父div
• 内部是带黑色背景的子div

示例代码：

<html>
<body>
<div style="scale: 0.75">
    <div style="width: 400px; height: 495px; border: 7px solid black; overflow: hidden">
        <div style="background: black; color: white; padding: 10px">test</div>
        other test
    </div>
</div>
</body>
</html>

原本父div没有内边距，边框和内部div之间不该有间隙，但添加scale: 0.75缩放后，内容周围出现了白线。我推测这和浏览器的抗锯齿机制有关，但因为必须缩放组件，急需解决方案。

我已经尝试过两种方法，但都不适用：

• 给父div添加背景色：能消除白线，但我需要父div是其他颜色背景
• 使用box-shadow：只能消除部分位置的白线，无法彻底解决

解决方案 #

方案1：给父元素添加同色内阴影 #

给父div添加box-shadow: inset 0 0 0 1px black，利用内阴影填补抗锯齿产生的缝隙——内阴影会覆盖在元素内部边缘，刚好挡住白线，同时不影响外部背景。修改后的父div样式：

width: 400px; height: 495px; border: 7px solid black; overflow: hidden; box-shadow: inset 0 0 0 1px black;

方案2：调整缩放原点 #

默认缩放原点为元素中心，可能导致边缘计算偏差。尝试将缩放原点设为左上角：

transform-origin: top left;

配合scale: 0.75使用，部分场景下能缓解抗锯齿带来的白线问题。

方案3：给内部元素加细微负边距 #

给黑色背景的子div添加margin: -1px，让它稍微超出父div边框范围，刚好覆盖白线。只要负边距数值足够小，不会影响整体布局：

background: black; color: white; padding: 10px; margin: -1px;

方案4：用drop-shadow模拟边框 #

如果父元素的边框不是必须用border属性，可以用filter: drop-shadow模拟边框，这种方式的阴影基于元素内容计算，缩放时抗锯齿表现更自然。去掉父div的border属性，替换为：

filter: drop-shadow(0 0 7px black);

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