Внутрення круговая тень градиентом

272

07 марта 2017, 15:32

Всем привет! Я недавно задавал, как сделать наклонную внутреннюю тень.

Теперь ко мне пришла необходимость создать такую же тень, то круговую. У меня появилась идея создать несколькими градиентами, но оно выглядит скорее, как ромб.

div { 
  width: 200px; 
  height: 200px; 
  margin: auto; 
  background: 
    linear-gradient(-115deg, transparent 70%, black 100%), 
    linear-gradient(-155deg, transparent 70%, black 100%), 
    linear-gradient(115deg, transparent 70%, black 100%), 
    linear-gradient(155deg, transparent 70%, black 100%), 
    linear-gradient(-70deg, transparent 70%, black 100%), 
    linear-gradient(-20deg, transparent 70%, black 100%), 
    linear-gradient(70deg, transparent 70%, black 100%), 
    linear-gradient(20deg, transparent 70%, black 100%), 
    linear-gradient(45deg, transparent 70%, black 100%), 
    linear-gradient(-45deg, transparent 70%, black 100%), 
    linear-gradient(-135deg, transparent 70%, black 100%), 
    linear-gradient(135deg, transparent 70%, black 100%) 
}

<div></div>

Answer 1

Для круговых теней существует radial-gradient:

div { 
  width: 200px; 
  height: 200px; 
  margin: auto; 
  background: radial-gradient(transparent 40%, black 80%, black 100%); 
}

<div></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обводка SVG в Internet Explorer не отображается

Для того, чтобы задать нестандартную обводку блоку, использую в качестве фона SVGЦвет обводки задаю так stroke: #FFD200

384

CSS

Плавное увеличение/ уменьшение границ

Как сделать, чтобы при уменьшении размера экрана, отступы справа и слева постепенно становились меньше, как на этом сайте:

307

CSS

Съезжают стили оформления, из за 2 файлов css

Привет

284

CSS

Как вывести таблицу на печать корректно?

Суть проблемы такая, мне нужно вывести на печать таблицу и чтобы она поместилась на одном листе А4У меня таблица выводится динамически (PHP)

266