css - 使用 CSS 翻译时阴影和边框分开

Question

当在使用负翻译绝对定位的单个元素上同时使用边框和阴影时(该技术已解释 here )，我在 Firefox 和 IE 中遇到了一个奇怪的渲染错误(它似乎在 Chrome 中有效).

当元素的尺寸不均匀时，元素被放置在半个像素上(可能由于不同的舍入)将阴影和边框彼此分开，显示出难看的间隙:

此示例可在 codepen 获得, 但您也可以通过在文档中放置一个 div 并使用以下 CSS 来重现此内容:

body {
    background: black;
}

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 299px;
    height: 99px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px 20px springgreen;
    border: 10px solid deepskyblue;
}

你知道如何避免这个问题吗？如何强制元素放置在全像素上？我尝试按照文章的建议将 transform-style: preserve-3d 添加到父元素，但没有成功。

Answer 1

我只能在 Internet Explorer 11 和 edge 中重现该错误。它似乎在 FireFox 和 chrome 中运行良好(没有测试 Opera 等其他软件)。

注意:只有在渲染区域本身大小不均匀时才会出现半像素问题。

您可能同时自己发现了这一点，但仅供引用:我发现的唯一解决方法是使用将四舍五入为完整像素的值。将 .1 添加到大小不均的元素将使它四舍五入到最接近的更高偶数值，因此它会“捕捉”到不支持真正子像素渲染但不可见的浏览器中的像素支持它的浏览器会发生变化，因为位置差异将是 20 个像素。

所以更新代码是

div 
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 299.1px;
    height: 99.1px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px 20px springgreen;
    border: 10px solid deepskyblue;
}

你可以找到一个code pen问题的演示和我个人使用的修复。