javascript - CSS边框在chrome和firefox中呈现不同

Question

当我使用相似的边框宽度和元素宽度时，CSS 虚线边框不会在 Firefox 上显示。看起来firefox在边框之前添加了一些偏移量。知道如何解决吗？

这是示例：

  <h3>width: 90px (works fine)</h3>
  <div style="width: 90px; background: yellow">
     <div style="border-top: 20px dotted red"></div>
  </div>
  
  
  <h3>width: 20px (border not showing on firefox)</h3>
  <div style="width: 20px; background: yellow">
     <div style="border-top: 20px dotted red"></div>
  </div>

火狐：

铬合金：

标签： javascripthtmlcssgoogle-chromefirefox

Answer 1

而是使用径向渐变：-

.circle-with-yellow {
   background-position: 0 0;
   background-size: 20px 20px;
   background-image: radial-gradient(red 50%, yellow 10%);
   height: 20px;
}