Правило CSS радиальных градиентов применяется ко всем браузерам, но Firefox - PullRequest
Новая
       45

Правило CSS радиальных градиентов применяется ко всем браузерам, но Firefox

1 голос
/ 02 апреля 2020

Я применяю это правило CSS к некоторым элементам div в веб-приложении. В основном мне нужно отобразить границу вокруг div, но без использования свойства border. Он работает в любом браузере, но 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/

Большое спасибо!

1 Ответ

0 голосов
/ 02 апреля 2020

Это работа для 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>
...