Как заставить пустой div или контейнер светиться чистым CSS?

Я хочу, чтобы пустой контейнер светился, поэтому я использую этот код:

box-shadow: 0 1px 20px 1px lightcyan;

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

Есть ли другая альтернатива для достижения этого эффекта с чистым CSS?

Как то так, но без фона:

введите описание изображения здесь

1 ответ

Решение

box-shadow можете сделать это, просто включите размытие и разброс (3-й и 4-й параметры).

Для круга добавьте border-radius: 50%; и дать небольшой width а также height,

div {
  margin: 100px;
  width: 1px;
  height: 1px;
  background-color: lime; /* for the 1px in the center */
  border-radius: 50%;
  box-shadow: 0 0 50px 70px lime;
}
<div></div>

Другие вопросы по тегам