我遇到了边界图像切片线显示在使用 Transform:scale() 放大的元素上的问题，如下所示。这似乎只发生在 Chrome 中。
通过阅读其他帖子，这似乎是 Chrome 子像素渲染问题。我尝试过 [backface-visibility:hidden] 这似乎没有帮助。我找到的一个解决方案是将 [perspective:1px;] 应用于父元素，将 [transform:translateZ(0);] 应用于有问题的元素。虽然这确实消除了线条，但图像明显变得模糊（大概是因为它正在被重新转换）。目前使用translateZ(0) 是解决该问题的唯一（或最佳）方法吗？我正在使用普通 JS。
下面是 border-image css 的应用方式
#outer {
height: 200px;
width: 200px;
border: 1px solid #333;
transform: scale(1.22)
}
#tile {
height: 50%;
width: 50%;
position: relative;
top: 50px;
left: 50px;
border: 0px solid transparent;
border-image-source: url(https://i.stack.imgur.com/Vz5jN.png);
border-image-slice: 10 fill;
border-image-width: 10px;
border-image-outset: 8px 2px 2px 8px;
box-shadow: 1px 1px 4px #666;
filter: brightness(30%)
}
<div id="outer">
<div id='tile'></div>
</div
通过将边框图像转换为 .svg，我能够部分解决该问题。
这更像是一种解决方法，而不是解决方案，但它完全消除了线条并保持图像清晰。 （但是，现在我遇到了一些抗锯齿问题，其中边界线的某些部分会根据比例闪烁。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
