css在节点与伪类同时使用background-color/image多一毫米背景解决（解决多的一丝边框）

问题

由于 css2 和 css3 对 background-color 及 background-image 的范围定义不同，当同时使用在伪类上时，会造成视觉上多一毫米（一丝）边框。

↑ 可以看到当在节点本身和伪类上同时使用了 background-color 或 background-image 后，会造成如上结果。

经测试，在 Safari 上没有此问题，在 2K 显示屏上并不明显，需要放大很多倍才能注意到。但在 1300 分辨率的中屏上多出来的一丝边框十分显眼。

解决

改用 animation 解决。

在我的场景下，设定节点与伪类同时有 background-color/image 是为了满足其中一个背景的放大与缩小时展示另外一个背景，在 去程 和 回程 做两个动画即可：

/* 去程 */
/* 默认不附加动画，当激活时，附加一致颜色的动画 */
@keyframes go {
    from {
        background-color: var(--color-green);
    }
    to {
        background-color: var(--color-green);
    }
}

&:checked {
    & + span {
        /* 保持最后一帧展示 */
        animation: go 0s forwards;
    }
}

/* 回程 */
/* 当激活回程时，颜色切换回和另一个背景颜色一致，避免“多一丝” */
@keyframes back {
    from {
        background-color: var(--color-green);
    }
    to {
        /* 切换回两者一致的颜色 */
        background-color: var(--color-grey);
    }
}

& + span {
	/* 秒数和动画 function 需要和其他动画一致  */
	/* 使用 step-end 进行尾部跳帧 */
    animation: back .3s step-end forwards;
}

这里在回程使用了跳帧，有关 step-end/step-start 的说明可见：

《 css 中 animation 动画的 step-end/step-start 参数作用 》