CSS 径向渐变规则适用于除 Firefox 之外的所有浏览器

Question

我正在将此 CSS 规则应用于 Web 应用程序上的某些 div。基本上我需要在 div 周围显示一个边框，但不使用边框属性。 它适用于除 Firefox 之外的所有浏览器。谁能帮我理解我做错了什么？

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background-color: #F8F9FA;
  background-image: radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
  background-image: -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
  background-position: top, right, bottom, left;
  background-size: 1px 1px, 1px 1px;
  background-repeat: repeat-x, repeat-y;
}

<div></div>

https://jsfiddle.net/za74L1st/1/

非常感谢！

Answer 1

这是linear-gradient 而非radial-gradient 的工作。

.box {
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: #F8F9FA;
    background-image: 
      linear-gradient(#dedede,#dedede),
      linear-gradient(#dedede,#dedede),
      linear-gradient(#dedede,#dedede),
      linear-gradient(#dedede,#dedede);
    background-position: top, right, bottom, left;
    background-size: 100% 1px,1px 100%;
    background-repeat: no-repeat;
}

<div class="box"></div>

您肯定会遇到亚像素渲染问题，因为您要定义半径小于1px 的非常小的圆。如果你增加值，你会在 Firefox 上看到一些东西：

.box {
  margin: 20px;
  width: 100px;
  height: 100px;
  background-color: #F8F9FA;
  background-image: 
    /* doesn't matter what you put here as value since the background-size is already small */
    radial-gradient(#dedede 51px, transparent 51px), 
    radial-gradient(#dedede 50px, transparent 50px), 
    radial-gradient(#dedede 99px, transparent 5px), 
    radial-gradient(#dedede 54px, transparent 54px);
  background-position: top, right, bottom, left;
  background-size: 1px 1px;
  background-repeat: repeat-x, repeat-y;
}

<div class="box"></div>