Как устранить пробел между box-shadow и div-фоном при использовании частично прозрачных значений rgba () - PullRequest
Новая
       62

Как устранить пробел между box-shadow и div-фоном при использовании частично прозрачных значений rgba ()

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

По какой-то причине при использовании частично прозрачный rgba () background-color и значения цвета box-shadow для элемента с нефиксированным ( на основе процентов) border-radius , он визуализирует крошечный прозрачный зазор на краю элемента div между фоном и рамкой-тенью .

Мой вопрос такой ...

Как мне избавиться от этого пробела , сохраняя при этом нефиксированный радиус границы с background- прозрачность цвета и теней?

Gap between box shadow and div background

Вот код: 

html {
  background-color: #cef;
  font-family: arial;
}
#background-underlay{
  background-color: white;
  text-align: center;
  margin-top: 5%; 
  padding-top:0px;
  color: black;
}
#overlay-div{
  display: flex;
  position: fixed;
  top: 15%;
  left: 15%;
  height: 70%;
  width: 70%;
  background-color: rgba(0, 0, 40, 0.8);
  color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 2em 2em rgba(0, 0, 40, 0.8);
}
<h1 id="background-underlay">Background Text</h1>
<div id="overlay-div"></div>

Описание образца элемента:

  • У меня есть <div> с полупрозрачным RGBA цвет фона и box-shadow.

  • Для значений цвета фона и тени ящика установлено значение rgba(0, 0, 40, 0.8).

  • border-radius элемента div установлено на 50%.

Вещи, которые я пробовал, но не увенчались успехом:

  • Настройка значения spread box-shadow
  • Добавление границы к div со значением цвета границы, равным rgba(), что и значение box-shadow и color background
  • Добавление inset box-shadow (возникла та же проблема )
  • Использование одного и того же цвета для background-color и box-shadow (как предлагает этот ответ на связанный вопрос)
  • Попытка вручную применить оверлей размером 1px "границы того же цвета rgba() с использованием отдельного элемента (я пробовал элемент ::before), чтобы" закрыть "пробел. (Я не мог расположить его так, чтобы он идеально совпадал с зазором, и даже при ширине границы всего в 1 пиксель он становится шире, чем прозрачный зазор, который я пытаюсь покрыть). Исходя из этого этот ответ на связанный вопрос.

Вещи, которые (хотя бы частично) устранили разрыв, которые являются не решениями :

  • Я могу устранить его, если я использую тот же solid (непрозрачный) значение цвета для обоих , но это не решение , так как я теряю прозрачность.

  • Изменение значения свойства opacity также не является решением , поскольку это влияет на прозрачность любого содержимого, которое будет вложено в div (например, изображения или текст), что является причиной того, что в первую очередь приходится сталкиваться с проблемой использования rgba() вместо opacity.

  • Наконец, изменив значение border-radius с процентное отношение к фиксированному (px или em) помогает , но в зависимости от значения часто это все равно будет приводить к разрыву. Так что это тоже не решение .

1 Ответ

2 голосов
/ 14 апреля 2020

Фильтр размытия может дать вам тот же результат или, по крайней мере, похожий, без проблем: 

html {
  background-color: #cef;
  font-family: arial;
}
#background-underlay{
  background-color: white;
  text-align: center;
  margin-top: 5%; 
  padding-top:0px;
  color: black;
}
#overlay-div{
  display: flex;
  position: fixed;
  top: 8%;
  left: 8%;
  height: 81%;
  width: 81%;
  background-color: rgba(0, 0, 40, 0.8);
  filter:blur(1.5em);
  color: white;
  border-radius: 50%;
}
<h1 id="background-underlay">Background Text</h1>
<div id="overlay-div"></div>
...