Как сделать однотонную тень красного цвета?

Question

[Сергей Соболь]

Подскажите, как сделать такую однотонную тень на заднем плане(указал стрелочками)? Или может вообще не через тень делать?

Comments

[Ankhena]

Проще через бордер.

Если тенью, то убрать у нее размытие
box-shadow: 0 0 0 20px #f005;

Answer 1

[Roman Grinberg]

.circle {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50%;
  border: 30px solid #f8d1d3;
}

UPD: Также можно сделать и с помощью box-shadow. Для этого надо в коде выше border заменить на это:
box-shadow: 0 0 0 30px #f8d1d3;

Answer 2

[iBird Rose]

сделай 2 блока вложенных друг в друга и все.
родителя в полупрозрачный красный покрась, а внутренний в красный.
ну и центрируй через

display: flex;
align-items: center;
justify-content: center;

Comments

[Сергей ZSA]

Извините, но какое убожество. Использовать flex ради обводки - это максимальное извращение

[iBird Rose]

Сергей ZSA, ИМХО, чисто опыт. Сейчас любят всякого вида анимации и трансформации. При моем подходе с этим блоком я могу делать что угодно. (к примеру, тот же эффект дыхания при ховере) а border и box-shadow слишком нестабильны при анимациях и трансформациях.
p.s. я прекрасно понимаю, что именно в этом вопросе это излишне. но это уже просто привычка. закладывать зарание на будущее

[Сергей ZSA]

iBird Rose, изменение ширины и высоты работает сильно хуже чем тень)) Если разве что не делать это всё через transform, он работает вменяемо с анимациями. Не встречал никаких проблем с анимациями box-shadow, всё плавно нормально отрабатывает. Перерендеринг за счет изменений ширины и высоты элементов сильно хуже, чем изменение тени, которая не влияет на положение элементов на странице. Тем более если ещё и flex туда впихнут - браузеру ещё больше приходится рассчетов делать, хотя с тенью их было бы минимум.

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

[iBird Rose]

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