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

Question

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

出现在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;

解释此简化版本：

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

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

这是编写bottom left的首选方法，因为它仅使用1行代码，而不必仅为边界半径添加其他代码行-多做，少写：）

我尚未在Chrome的70+版本上对此进行测试，因为我的版本是68.xxx，并且由于显示浏览器已经是最新版本而无法更新...