This page is being translated; the original is shown (Русский ).
Падающая тень
Классы drop-shadow-{n} отбрасывают тень фильтром drop-shadow(): тень
повторяет форму видимой части элемента, а не его прямоугольник. Берите их для
значков, SVG и картинок с прозрачностью; для блоков берите
тень элемента .
Пример
Шкала
Под каждым образцом — класс ступени.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-8 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-0" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-0</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-1" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-1</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-2" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-2</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-3" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-3</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-4" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-4</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-5" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-5</code >
</div >
</div >
Падающая тень и тень элемента
shadow-3 рисует тень прямоугольника, drop-shadow-3 — тень формы.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-8 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary shadow-3" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >shadow-3</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-3" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-3</code >
</div >
</div >
Наведение
С префиксом hover: ступень меняется при наведении. Наведите указатель на
звезду.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-8 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<svg class ="w-d8 h-d8 color-primary drop-shadow-1 hover:drop-shadow-5 transition" viewBox ="0 0 100 100" aria-hidden ="true" ><path fill ="currentColor" d ="M50 6l13 27 30 4-22 21 5 30-26-14-26 14 5-30L7 37l30-4z" /></svg >
<code class ="text-1/2 color-on-surface-variant" >drop-shadow-1 hover:drop-shadow-5</code >
</div >
</div >
Классы
Класс
CSS
Значения
drop-shadow-0--sf-shadow--level-ratio: 0—
drop-shadow-1--sf-shadow--level-ratio: 1—
drop-shadow-2--sf-shadow--level-ratio: 2—
drop-shadow-3--sf-shadow--level-ratio: 4—
drop-shadow-4--sf-shadow--level-ratio: 8—
drop-shadow-5--sf-shadow--level-ratio: 16—
Условия (что это ): ширина экрана — нет; состояния — hover:. Например: hover:drop-shadow-0.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Ступени 1 … 5 удваивают смещение и размытие тени: множители 1, 2, 4, 8 и
drop-shadow-0 снимает тень.
HTML wrap_text Wrap source lines content_copy Copy
<img class ="drop-shadow-2" src ="/images/product.png" alt ="Наушники" >
<svg class ="drop-shadow-1 color-primary" aria-hidden ="true" >…</svg >
Ограничения
Ядро ставит фильтр каждому элементу, в классе которого есть слово
drop-shadow, и убирает у него box-shadow: падающая тень и тень элемента
на одном элементе не сочетаются.
Фильтр задаёт свойство filter и перекрывает другие фильтры того же
элемента.
Префиксов ширины экрана у семейства нет.
См. также
Предыдущая Цвет падающей тени Следующая Цвет тени элемента
