不同浏览器中的线性渐变

Question

我使用线性渐变编写了一个CSS样式，为矩形提供了如下所示的线框效果：

background:linear-gradient(to bottom right, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 50%, transparent 50%),
  linear-gradient(to bottom left, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 50%, transparent 50%),
  linear-gradient(to left, transparent calc(100% - 1px), #000 calc(100% - 1px), #000 100%, transparent 100%),
  linear-gradient(to right, transparent calc(100% - 1px), #000 calc(100% - 1px), #000 100%, transparent 100%),
  linear-gradient(to top, transparent calc(100% - 1px), #000 calc(100% - 1px), #000 100%, transparent 100%),
  linear-gradient(to bottom, transparent calc(100% - 1px), #000 calc(100% - 1px), #000 100%, transparent 100%) #ccc!important;

我遇到的问题是样式在Firefox上显示为我想要的但在Chrome上没有那么多。

有没有办法可以改变我的代码，这样我就可以在Chrome上使线框看起来一样？

我在Mac上使用最新版本的Firefox和Chrome。

我附上了截图来描述我目前看到的内容。

火狐 的铬