如何修复CSS按钮hover状态下边缘出现原背景色细边的图形错误

问题原因 #

这是Chrome浏览器渲染带圆角、内阴影过渡元素时的固有渲染缺陷，本质是内阴影的亚像素抗锯齿计算没有完全覆盖按钮的原始背景色像素，和Windows 11系统无直接关联。

可行修复方案 #

• 方案1：调整背景色和内阴影逻辑（零额外属性，改原有逻辑即可）
  把按钮默认背景色改为hover时的深灰，默认状态用内阴影撑出beige背景，漏色会和背景色一致完全不可见，修改后的CSS代码如下：

.start{
    width: 200px;
    height: 75px;
    border: none;
    color:black;
    /* 把默认背景改为hover时的颜色，避免漏色露出浅米色 */
    background-color: rgb(36, 36, 37);
    border-radius: 50px;
    /* 默认用内阴影撑出米色背景 */
    box-shadow: inset 0 0 0 200px beige;
    font-size: 15px;
    outline: 0;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

.start:hover{
    /* hover时把内阴影偏移走，露出底层的深灰背景 */
    box-shadow: inset 200px 0 0 0 beige;
    color: white;
}

• 方案2：新增属性遮盖漏色（无需修改原有逻辑）
  直接给.start类添加向内的描边遮盖边缘漏色，原有代码完全不用调整，新增两行属性即可：

.start {
    /* 原有属性全部保留，新增以下两行 */
    outline: 1px solid rgb(36, 36, 37);
    outline-offset: -1px;
}

• 方案3：改用渐变实现填充动画（无渲染问题，性能更优）
  完全替换原有填充逻辑，用背景渐变过渡实现效果，不存在边缘漏色问题：

.start{
    width: 200px;
    height: 75px;
    border: none;
    color:black;
    border-radius: 50px;
    font-size: 15px;
    outline: 0;
    cursor: pointer;
    /* 渐变实现双色背景 */
    background: linear-gradient(to right, rgb(36, 36, 37) 50%, beige 50%);
    background-size: 200% 100%;
    background-position: right top;
    transition: background-position 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.start:hover{
    background-position: left top;
    color: white;
}

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