悬停时的CSS3 box-shadow与Chrome中的部分border-radius错误相结合

Question

当我在悬停在具有部分border-radius的元素上使用box-shadow时，哪里是非常奇怪的bug。

出现在Win10上的Chrome 70.0.3534.4中这是片段：

#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;

解释这个缩短版本：

border-radius：5px 5px 0 0;

本声明中的第一个5px是top left，第二个5px是top right，第一个0是bottom right，最后0是bottom left。

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

我没有在Chrome的70+版本上测试过这个版本，因为我的版本是68.xxx而且我无法更新，因为它说浏览器已经是最新的...