home chevron_right
Тени chevron_right
Тень элемента

Тень элемента (box-shadow)link

https://dev.ru.simai.io/ru/ui/utility/shadow/box-shadow.php

Утилиты shadow-* задают уровень тени через --sf-shadow--level-ratio.

Таблица классовlink

Класс Значение
.shadow-0 тень отключена
.shadow-1 --sf-shadow--level-ratio: 1
.shadow-2 --sf-shadow--level-ratio: 2
.shadow-3 --sf-shadow--level-ratio: 4
.shadow-4 --sf-shadow--level-ratio: 8
.shadow-5 --sf-shadow--level-ratio: 16
.hover:shadow-0 ... .hover:shadow-5 уровень тени в :hover

Синтаксисlink

  • shadow-{0...5}
  • hover:shadow-{0...5}

Примерlink

<div class="shadow-1 hover:shadow-3 p-2 radius-2 border border-outline-variant">
  Hover to increase depth
</div>

Playgroundlink