悬停时的 CSS3 框阴影与 Chrome 中的部分边框半径错误相结合

Question

当我在具有部分边框半径的元素上悬停时使用 box-shadow 时，哪里会出现非常奇怪的错误。

出现在 Win10 上的 Chrome 70.0.3534.4 这是sn-p：

#test {
  width: 300px;
  height: 70px;  
  border: 1px solid #ccc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#test:hover {
  box-shadow: 0 0 4px 0 #000;
}

<div id="test"></div>

也许有人知道解决方法？

Answer 1

这可能是您使用border-radius 属性的方式...您是否尝试过这个缩短版：

border-radius: 5px 5px 0 0;

上面的内容与您目前拥有的完全相同：border-top-left-radius: 5px; 和 border-top-right-radius: 5px;

解释这个缩短的版本：

边框半径：5px 5px 0 0;

此语句中的第一个5px 是top left，第二个5px 是top right，第一个0 是bottom right，最后一个0 是bottom left。

这是编写 border-radius 的首选方式，因为它只使用 1 行代码，而不必为边框半径添加额外的代码行 - 多做少写 :)

我没有在 Chrome 的 70+ 版本上对此进行测试，因为我的版本是 68.xxx，我无法更新，因为它说浏览器已经是最新的......