Тень div css: box-shadow | htmlbook.ru

Свойство box-shadow — тень блока

Свойство box-shadow задает тень блоку.
В качестве значения свойство принимает 6
параметров, перечисляемые через пробел, либо
ключевое слово none, отменяющее тень
совсем.

Синтаксис

селектор {
box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет;
}

селектор {
box-shadow: none;
}

Параметры

Параметр	Описание
inset	Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан — то снаружи.
сдвиг по x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой.
размер тени	Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан — тень будет такого же размера, что и элемент.
цвет	Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени
задаются в любых единицах
для размеров, кроме процентов.

Пример

В данном примере тень сдвинута вниз и влево
и добавлено небольшое размытие:

<div></div>
#elem {
box-shadow: 5px 5px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}

:

Пример .

Четкая тень

В данном примере тень сдвинута вниз и влево,
но размытия нет (тень будет четкой):

<div></div>
#elem {
box-shadow: 2px 2px black;
border: 1px solid black;
width: 300px;
height: 50px;
}

:

Пример . Равномерная тень

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

<div></div>
#elem {
box-shadow: 0px 0px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}

:

Пример . Размер тени

В данном примере тень не сдвинута, размытие
равно нулю, но к ней добавлен размер (черное
— это граница, красное — это тень):

<div></div>
#elem {
box-shadow: 0 0 0 3px red;
border: 3px solid black;
width: 300px;
height: 50px;
}

:

Пример . Размытие + размер тени

В данном примере тень не сдвинута, но к ней
добавлены размытие и размер (черное — это
граница, красное — это тень):

<div></div>
#elem {
box-shadow: 0 0 3px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}

:

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

<div></div>
#elem {
box-shadow: inset 0 0 6px black;
border: 1px solid black;
width: 300px;
height: 50px;
}

:

Смотрите также

• свойство text-shadow,
  которое задает тень тексту

Тень блока и тень текста в CSS, внутренняя тень

Тени блока

Свойство box-shadow устанавливает тени блока. Значением этого свойства является
перечисление параметров, которые определяют отображение тени. Параметры перечисляются в следующем порядке:

1. горизонтальное смещение (обязательно)
2. вертикальное смещение (обязательно)
3. размытие
4. размер
5. цвет (обязательно)
6. расположение

Смещения, размытие и
размер указываются в единицах измерения CSS. Вместо
параметров можно указать значение
none, которое устанавливает отсутствие тени. Это значение используется, когда нужно
убрать тени, если они ранее были заданы.

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

Чтобы часть тени стала видна, ей задаются смещения. Они сдвигают тень вправо и вниз. Любое смещение
может иметь и отрицательные значения. Тогда тень, соответственно, сдвигается влево и вверх. Для примера
создадим такой блок:

Стиль:

+

div
  {
  width: 150px;
  height: 100px
  margin: 50px;
  box-shadow: 10px 10px #707070;
  background-color: Blue;
  }

HTML код:

Попробуйте установить другие смещения. Задайте отрицательные значения.

Следующий параметр — это размытие. Оно делает плавный переход от цвета тени к цвету фона. Размытие занимает
отдельное место, поэтому увеличивает размер тени. У него нет отрицательных значений. Добавим этот параметр в
пример. Блок получится такой:

Установка такой тени выглядит так:

box-shadow: 10px 10px 5px #707070;

Далее следует изменение размера. Положительное значение увеличивает размер тени, а отрицательное уменьшает.
Совместно со смещением этот параметр позволяет создавать различные эффекты. Пример:

box-shadow: 50px 30px 1px -23px #707070;

В CSS существует возможность создать внутреннюю тень.
Если в значении свойства box-shadow указать слово
inset, то тень располагается не снаружи блока, а внутри. Из-за этого блок становится
как бы вогнутым. На мой взляд, внутренняя тень выглядит не очень красиво, поэтому используется не часто.
Тень отображается на фоне блока, но находится под содержимым. Слово пишется после всех
остальных параметров. При этом изменение размера устанавливается по-другому — положительное значение уменьшает
размер тени. Оно позволяет отобразить тени со всех сторон блока.

box-shadow: 6px 6px 30px 10px #707070 inset;

Тени текста

Тексту также можно задать тень. Это делается с помощью свойства text-shadow. Значение
этого свойства указывается практически также, как для блоков, только оно имеет меньше параметров. Они
перечисляются в следующем порядке:

1. горизонтальное смещение
2. вертикальное смещение
3. размытие
4. цвет

Указание смещений является обязательным. Для примера создадим такой текст:

Текст

Он создаётся так:

Стиль:

p
  {
  margin: 50px;
  font: bold 60px Verdana;
  text-shadow: 3px 3px #AAA;
  }

HTML код:

Если тени текста установить размытие с большим значением, то она может выглядеть совсем по-другому.
Пример:

Текст

text-shadow: 4px 4px 10px #FF053A;

Тень текста CSS и тень блока

Текстовая тень

CSS3 устанавливает эффект тени текста, устанавливает эффект тени стиля text-shadow шрифта текста, изначально в версии CSS2 также имеет это свойство, но в CSS3 text shadow text-shadow применяется снова, обогащает макет текста и эффект украшения макета

	*text-shadow*

Структура: div {text-shadow: 5px 2px 6px # 000;}
1. 5 пикселей представляют 5 пикселей слева от тени.
2. 2 пикселя означает, что тень находится на расстоянии двух пикселей от верха текста.
3. 6 пикселей представляет диапазон распространения тени.
В-четвертых, # 000 представляет цвет тени.
(Один и два обязательны, три и четыре необязательны)
Случай эффекта
Код

эффект

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

тень коробки

box-shadow
Структура: div {box-shadow: 5px 2px 6px # 000;}

Единица, 5 пикселей представляет положение горизонтальной тени
2. 2 пикселя представляют положение вертикальной тени.
3. 6 пикселей представляет собой область покрытия тени.
В-четвертых, # 000 представляет цвет тени.
(обязательно для одного и двух, необязательно для трех и четырех)

• Код и эффект
  Базовый код

  Эффект следующий

• Когда горизонтальное и вертикальное направления отрицательны (box-shadow: -5px -2px 6px # 000;)

• Когда горизонтальное и вертикальное направления равны 0, вокруг в это время будут тени. Эта ситуация также часто используется (box-shadow: 0px 0px 6px # 000;)

• Когда горизонтальное и вертикальное направления равны 0, вокруг будут тени, третье значение — это расстояние размытия (область, покрытая тенью), а четвертое значение — размер тени.

• Когда горизонтальное и вертикальное направления равны 0, вокруг в это время будут тени, а третье значение — это площадь покрытия тени, и оно установлено на внутреннюю тень (вставка)

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

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

• Однако атрибут распространения используется редко, он используется для увеличения радиуса тени. Например, добавьте разворот к коду, чтобы он стал box-shadow: -5px -2px 10px 10px # 9521de inset ;. Вторые 10 пикселей — это значение атрибута распространения.

• Эффект следующий

• Вышесказанное является моим личным пониманием теней текста и теней блоков.

Красивая тень блока (box-shadow) через CSS

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

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

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

1. Первый вариант. Рамка с красивой тенью box-shadow без смещений

Не сложный вариант, что выстроен на свойстве box-shadow на странице, где производит равномерное обтекание каркаса, что идет без смещений.

HTML

Код

<div>Вариант №1. Тень по сторонам</div>

CSS

Код

.koshadows_nalinedsup {
  padding: 15px;
  margin: 27px;
  width: 125px;
  height: 125px;
  box-shadow: 0px 0px 20px 4px #144d98;
  border-radius: 5px;
}

Снимок предоставлен выше, что по стилистике 20px будет выставлять равномерно по сторонам ширину.

2. Второй вариант. Создание рамки со смещенной тенью

Этат вариант почти аналогичен первому, тлко будет со смещенной рамкой.

HTML

Код

<div>Второй вариант №2. Смещенная тень.</div>

CSS

Код

.koshadows_nalinedsup_2 {
  padding: 7px;
  margin: 30px;
  width: 134px;
  height: 134px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 3px #4b6dc5;
}

Здесь видно, как с верхнего левого угла идет смещение тени.

3. Третий вариант №3. Создать свечение каркаса или рамки

В этом варианте реализует полное свечение тени, где основном можно видеть на кнопках какой вид.

HTML

Код

<div>Третий вариант №3. Создать свечение.</div>

CSS

Код

.koshadows_nalinedsup_3 {
  padding: 7px;
  margin: 19px;
  width: 185px;
  height: 108px;
  box-shadow: 0px 0px 18px #253688;
  border-radius: 12px;
}

Закругление углов установливаем в самый низ, так как если ставить выше, будет пропадать рамка.

4. Четвертый вариант. Создать внутренне свечение границ

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

HTML

Код

<div>Четвертый вариант №4. Основное свечение внутри.</div>

CSS

Код

.koshadows_nalinedsup_4 {
  padding: 9px;
  margin: 15px;
  width: 195px;
  height: 117px;
  box-shadow: 0px 0px 19px #2c3a7b inset;
  border-radius: 8px;
}

Такой премер можно пременить при различном оформление элементов.

5. Пятый вариант. Здесь совмещаем цветовую палитру теней

Создадим совмешение теней разной гаммы цвета, которая происходит через запятую. Где получится интересный результать, вероятно самый яркий, плюс еще присутствует 3D формат.

HTML

Код

<div>Пятый вариант №5. Разброс цветовых теней.</div>

CSS

Код

.koshadows_nalinedsup_5 {
  padding: 9px;
  margin: 18px;
  width: 178px;
  height: 123px;
  box-shadow: 0px 0px 14px 2px #0dec0d inset, 4px 4px 9px #0e0eef, -4px -4px 9px #ea0909;
  border-radius: 4px;
}

Такой метод не так популярен, но если его создать, то он безусловно превлечет внимание.

Важно: старые браузеры

Браузер IE до 9 версии не будет поддерживать свойство box-shadow, а точнее просто его не видеть.

Префиксы браузеров под свойство box-shadow:

-webkit-box-shadow — Идет для браузеров Chrome только до 10 обновления, также Safari до 5.1 версий.

-moz-box-shadow — здесь воспроизводится для Firefox, где идет до 4.0 версии.

Вашему вниманию представлено самые простые и актуальные методы на постановку теней свойством box-shadow при помощи CSS. Само свойство box-shadow позволить выставить красивые тени заданному элементу html. Где все больше можно заметить в использование веб разработчиками довольно часто, где все создается для того, чтоб красиво выглядело.

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

css — Как сделать тень только с одной стороны? — Stack Overflow на русском

Задумывались ли вы, что именно столкновение света и тени позволяет нам увидеть форму предметов. Если выключить свет, то в темноте мы не увидим никакой формы. Если все осветить очень ярким прожектором, то формы мы тоже не увидим. Только столкновение света и тени позволяют нам ее увидеть.

Светотень не ложится на предметы как попало. Есть определенные закономерности, как будет располагаться светотень на разных формах. И рисующему человеку это необходимо знать.

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

Рассмотрим их по порядку.

Собственная тень

• Куб

  Свет и тень на кубе встречаются в одну жесткую прямую линию, которую называют «линией разлома на светотень» или просто «разломом».

  При этом напряжение тени в сторону света усиливается, также как и напряжение света в сторону тени. Другими словами тень на теневой грани куба будет самой темной там, где она соприкасается с освещенной гранью. В свою очередь и свет на светлой грани будет светлее у линии разлома. Таким образом получается, что ни самая темная часть тени, ни самая светлая часть света не лежат на самом краю формы. У куба разлом на светотень будет «жестким».

• Цилиндр.

  Разлом на светотень на цилиндре ведет себя в чем-то похожим образом. Свет и тень здесь тоже как и у куба образуют прямую линию. Тень так же, как и на кубе будет более напряжена в сторону света. Такое усиление тени в сторону света – это общая закономерность для любых форм. Свет тоже не лежит на краю формы. И это тоже общая закономерность.

  Но есть и существенные отличия в распространении света по цилиндру. Здесь свет и тень не встречаются в одну линию, а между ними есть промежуточные полутона более светлые к свету, и более темные к тени. На цилиндре мы видим «мягкий» разлом.

• Конус

  Конус очень похож на цилиндр. Линия разлома так же располагается по прямой, мы наблюдаем «мягкий» разлом. Напряжение света и тени и чередование полутонов такое же, как на цилиндре.

  Тем не менее, конус выделен как одна из четырех основных фигур и у него есть одно существенное отличие. Чем ‘уже форма, тем напряженнее и контрастнее становится тень, а там, где форма, становится шире, тень светлеет и как бы расплывается по форме.

• Шар

  У шара наблюдается несколько иная картина. Линия разлома проходит по окружности, лежащей перпендикулярно направлению источника света.

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

Это то, что касается «собственных» теней, т.е. теней на самой форме. А есть еще и «падающие тени». «Падающей» называют тень, которую форма отбрасывает на другие поверхности.

Падающая тень

«Падающей» называют тень, которую форма отбрасывает на другие поверхности.

У трех из этих форм – куба, цилиндра и конуса – падающая тень строится по одному принципу, а у шара – по другому.

• Куб, цилиндр и конус

  В первом случае есть точка, где разлом встречается с поверхностью, на которой стоит форма. Это так называемая «мертвая точка». Это то место, где заканчивается собственная тень и начинается падающая. Через эту точку обе тени связаны.

• Шар

  У шара мы наблюдаем другую картину. Линия разлома проскакивает мимо точки соприкосновения шара с поверхностью, на которой он стоит. И «мертвая точка» отсутствует. Падающая тень ложится вокруг точки соприкосновения шара, как бы обводя ее.

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

И еще. Надо различать светотень и тон в рисунке. И то, и другое может быть сделано с помощью штриховки. Но задачи у светотени и тона разные.

Светотень – это формообразующее начало. Светотень будет одинаково ложиться как на белый, так и на черный или цветной предмет. Любая раскраска предмета или фактура поверхности не изменят законов распространения светотени.

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

Детальный обзор CSS свойства box-shadow

От автора: CSS свойство box-shadow позволяет сделать так, чтобы у блочных элементов появилась внешняя или внутренняя тень. Давайте познакомимся поближе с этим CSS свойством.

Далее представлены три разных примера применения CSS свойства box-shadow к элементу div.

Пример 1: Простая внешняя тень

Вот так вы можете задать для элемента div легкую серую внешнюю тень:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

box-shadow: 0 0 10px gray;

Пример 2: Внутренняя тень

Внутренняя тень может быть задана с использованием значения inset.

box-shadow: inset 0 0 10px;

Пример 3: Смешение внешней тени

В этом примере тень отбрасывается с наклоном от нижней правой части блока благодаря использованию горизонтального и вертикального смещения на 5px.

box-shadow: 5px 5px 10px;

А что если вы хотите, чтобы тень отбрасывалась от верхней левой части блока? Это можно осуществить, используя отрицательные значения для горизонтального и вертикального смещения. В следующем примере горизонтальное и вертикальное смещение равно -5px.

box-shadow: -5px -5px 10px;

Теперь, когда вы увидели несколько «живых» примеров использования CSS свойства box-shadow, давайте пойдем дальше.

Синтаксис

Общий синтаксис для свойства box-shadow выглядит так:

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

Значения CSS свойства box-shadow

CSS свойство box-shadow может иметь шесть возможных значений:

inset – отображение тени внутри элемента

horizontal offset – горизонтальное смещение

vertical offset – вертикальное смещение

blur radius – радиус размытия

spread distance – растяжение (толщина тени)

color – цвет

И только два значения являются обязательными: горизонтальное и вертикальное смещение.

Для четырех значений (горизонтальное смещение, вертикальное смещение, радиус размытия и растяжение) должны использоваться CSS единицы измерения (например, px, em, % и т.д.).

Цвет должен быть представлен в виде допустимого в CSS значения для определения цвета, например, шестнадцатеричного значения (#000000).

Описание значений свойства box-shadow

Inset

Если ключевое слово inset указано, тень будет отображаться внутри HTML элемента.

box-shadow: inset 0 0 5px 5px olive;

Для сравнения приведем тот же пример без указания inset:

box-shadow: 0 0 5px 5px olive;

Горизонтальное смещение

Значение горизонтального смещения отвечает за позицию тени по оси X. Положительное значение будет смещать тень вправо, а отрицательное – влево.

В следующем примере горизонтальное смещение равно 20px, т.е. в два раза больше, чем вертикальное смещение, которое равно 10px, поэтому по горизонтали тень будет в два раза шире.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вертикальное смещение

Значение вертикального смещения отвечает за позицию тени по оси Y. Положительное значение будет смещать тень вниз, а отрицательное – вверх.

В следующем примере вертикальное смещение равно -20px, т.е. в два раза больше, чем горизонтальное смещение, которое равно 10px, поэтому размер тени в два раза больше по вертикали. Также, поскольку указано отрицательное значение, то и тень смещается от верхней части блока.

Радиус размытия

Значение радиуса размытия влияет на размытость/резкость тени.

Радиус размытия является необязательным значением. Если вы не укажите его, то по умолчанию он будет равен 0. А также он не может быть отрицательным значением, в отличии от горизонтального и вертикального смещения.

Если радиус размытия равен 0, то границы и цвет тени будут четкими. По мере того как вы будете увеличивать значение, тень будет становится более размытой.

В следующем примере радиус размытия равен 20px, поэтому эффект достаточно хорошо виден.

box-shadow: 5px 5px 20px;

Растяжение (ширина)

Значение растяжения (ширины) увеличивает или уменьшает тень во всех направлениях. Если оно является положительным, тень будет увеличиваться со всех сторон. Если оно будет отрицательным, то наоборот тень будет уменьшаться.

Обратите внимание на то, что при положительном значении растяжения (10px), со всех сторон элемента появляется тень в 10px, при том, что горизонтальное и вертикальное смещение равно 0:

box-shadow: 0 0 10px 5px;

Когда значение растяжения является отрицательным, тень пропорционально уменьшается. В следующем примере тень меньше, чем ширина блока, потому что указано отрицательное значение растяжения, а горизонтальное смещение равно 0:

box-shadow: 0 10px 10px -5px;

Цвет

Как вы уже могли догадаться по названию, значение цвета устанавливает цвет тени. Для него может использоваться любой допустимый в CSS формат представления цвета. Цвет является необязательным значением.

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

color: red;
box-shadow: 0 0 10px 5px;

Если вы хотите, чтобы у тени был другой цвет, тогда вам нужно будет указать его при объявлении свойства box-shadow. В следующем примере видно, что несмотря на то, что значение цвета для элемента div по-прежнему равно red, цвет тени теперь равен blue.

color: red;
box-shadow: 0 0 10px 5px blue;

Несколько теней

Вот тот случай, когда вы можете проявить свою креативность в использовании данного CSS свойства, т.е. вы можете создать больше одной тени для одного элемента. Синтаксис будет следующим:

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

Другими словами, вы можете назначать несколько теней, отделяя группу значений для каждой тени запятыми (,). В следующем примере созданы две тени: красная – в верхней левой части блока, а синяя – в нижней правой.

box-shadow: -5px -5px 30px 5px red,
5px 5px 30px 5px blue;

Браузерная поддержка

CSS свойство box-shadow имеет хорошую браузерную поддержку. Считая браузер Internet Explorer наименьшим общим знаменателем, данное свойство поддерживается этим браузером с 9 версии (выпущенной в 2011 году).

Вы можете посмотреть демо-примеры использования свойства box-shadow, которые были приведены в данной статье, нажав по следующей ссылке.

Автор: Jacob Gube

Источник: //sixrevisions.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Тень — Tailwind CSS

Внешняя тень

Используйте утилиты shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl или shadow-2xl для применения теней внешнего блока разного размера к элементу.

Внутренняя тень

Используйте утилиту shadow-inner, чтобы применить к элементу тонкую тень вставки. Это может быть полезно для таких вещей, как элементы управления формы или колодцы.

Без тени

Используйте shadow-none, чтобы удалить существующую тень блока из элемента. Это чаще всего используется для удаления тени, которая была применена в меньшей контрольной точке.

Адаптивность

Чтобы управлять тенью элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите теневого копирования. Например, используйте md:shadow-lg, чтобы применить утилиту shadow-lg только при средних размерах экрана и выше.

<div>
  
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Тени элемента

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

Если предоставляется тень DEFAULT, она будет использоваться для утилиты shadow без суффикса. Любые другие ключи будут использоваться как суффиксы, например, ключ '2' создаст соответствующую утилиту shadow-2.

  
  module.exports = {
    theme: {
      boxShadow: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+       '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
        none: 'none',
      }
    }
  }

Варианты

По умолчанию, только responsive, group-hover, focus-within, hover и focus варианты создаются для утилит box shadow.

Вы можете контролировать, какие варианты создаются для утилит box shadow для изменения свойства boxShadow в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты active:

  
  module.exports = {
    variants: {
      extend: {
        
+       boxShadow: ['active'],
      }
    }
  }

Если Вы не планируете использовать в своем проекте утилиты для изменения box shadow, Вы можете полностью отключить их, установив для boxShadow свойство значение false в разделе corePlugins Вашего файла конфигурации:

  
  module.exports = {
    corePlugins: {
      
+     boxShadow: false,
    }
  }

HTML DOM Style box Свойство тени

❮ Объект стиля

Пример

Добавить тень блока к элементу div:

document.getElementById («myDIV»). style.boxShadow = «10px 20px 30px синий»;

Попробуйте сами »

Определение и использование

Свойство boxShadow устанавливает или возвращает тени элемента коробки.

Поддержка браузера

Синтаксис

Вернуть свойство boxShadow:

Установите свойство boxShadow:

объект .style.boxShadow = «none | h-shadow v-shadow blur spread color | inset | initial | inherit»

Примечание: Свойство boxShadow прикрепляет одну или несколько теней к
коробка. Свойство представляет собой список теней, разделенных запятыми, каждая из которых определяется цифрами 2–4.
значения длины, необязательный цвет и необязательное ключевое слово вставки.Пропущено
длины равны 0.

Значения собственности

Технические характеристики

Связанные страницы

Ссылка CSS: свойство box-shadow

❮ Объект стиля

CSS свойство размера коробки

Пример

Включить отступ и границу в
в
общая ширина и высота элемента:

# example1 {
box-sizing: border-box;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство box-sizing определяет, как ширина и высота элемента
вычислено: должны ли они включать отступы и границы или нет.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

размер коробки: контент-бокс | граница-бокс | начальный | наследование;

Значения собственности

Другие примеры

Пример

Укажите две рамки с полями рядом:

div
{
Коробка калибровочная: бордюр-бокс;
ширина: 50%;
граница: сплошной красный 5 пикселей;
плыть налево;
}

Попробуй сам »

Пример

Комплект «Коробка универсальная калибровочная»:

* {
размер коробки: рамка-рамка;
}

Попробуй сам »

Связанные страницы

Учебное пособие по CSS: CSS Box Sizing

Ссылка на HTML DOM: свойство boxSizing

CSS свойство box-decoration-break

Пример

Укажите свойство box-decoration-break:

охватывать.ex1 {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
коробка-украшение-разрыв:
клон;
}

span.ex2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: ломтик;
коробка-украшение-перерыв:
кусочек;
}

Попробуй сам »

Определение и использование

Свойство box-decoration-break определяет, как фон, отступы,
применяется граница, изображение границы, тень блока, поля и путь обрезки элемента
когда коробка для элемента фрагментирована.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit-, указывают первую версию, работавшую с префиксом.

Синтаксис CSS

коробка-украшение-разрыв: срез | клон | начальный | наследование | отключено;

Значения собственности

Как установить цвет тени div с помощью CSS?

В этой статье мы увидим, как установить цвет тени div с помощью CSS.Подобно тому, как у людей есть свои тени, мы можем использовать CSS, чтобы сделать тень любого цвета для элемента div.

Свойство тени блока: Это свойство используется для создания одной или нескольких теней к элементу.

Подход:

• Создайте HTML-страницу с элементом div.
• С помощью свойства box-shadow примените тень к элементу div.

Пример 1: В приведенном ниже примере мы применили тень к нашему элементу div с помощью свойства box-shadow.

HTML

Вывод:

Пример 2:

HTML

Вывод:

Box Shadow CSS Tutorial - How to Add Drop Shadow to Any HTML Element

Мы можем добавить тень к любому элементу HTML, используя свойство CSS box-shadow .Вот как.

Добавление базовой тени

Давайте сначала настроим некоторые базовые элементы HTML для добавления наших теней:

  
 Box1 
 Box2 
 Box3 
  

Затем добавьте базовый CSS:

  p {
    отступ: 10 пикселей;
}
.коробка {
    отступ: 20 пикселей;
    ширина: 50%;
    маржа: 30 пикселей автоматически;
    фон: # 000;
    цвет: #fff;
}  

В результате мы получим всего три черных ящика, в которые нам будет легко добавлять тени, вызывая их уникальный идентификатор:

Настройка HTML-элементов

Чтобы добавить базовую тень, давайте воспользуемся свойством box-shadow в Блоке 1. :

  / * смещение-x | смещение-у | цвет */
# box1 {
    box-shadow: 6px 12px желтый;
}  

Добавление базовой тени к Box 1

У нас есть 3 параметра.Первые 2 - это, соответственно, смещение по оси x и смещение по оси y. Они задают расположение падающей тени.

Смещение относительно исходной точки, которая в HTML всегда является левым верхним углом элемента. Положительное смещение по оси x смещает тень вправо, а положительное смещение по оси Y перемещает тень вниз.

Третий параметр - это цвет вашей тени.

Имейте в виду, что хотя мы использовали здесь элементы

  / * смещение-x | смещение-у | радиус размытия | цвет */
# box2 {
box-shadow: 6px 12px 4px красный;
}  

  / * offset-x | смещение-у | радиус размытия | радиус распространения | цвет */
# box2 {
    box-shadow: 6px 12px 4px 8px красный;
}  

  / * Любое количество теней, разделенных запятыми * /
# box3 {
    box-shadow: 6px 12px 2px 2px синий, -6px -12px 2px 2px зеленый;
}  

  

   Ключ к успеху - начать раньше, чем вы будете готовы. 
  
 & mdash; Мари Форлео 
  

  blockquote {
  ширина: 50%;
  маржа: 50 пикселей автоматически;
  отступ: 20 пикселей;
  размер шрифта: 24 пикселя;
  box-shadow: вставка 10px 5px черный;
}  

  box-shadow: вставка 10px 5px 25px 5px черный, 5px 5px 12px 2px черный;  

  box-shadow: h-offset v-offset цвет распространения размытия;  

  

  
    
  
  
    
 W3Docs 
 
  

  h2 {
  выравнивание текста: центр;
  фон: # c4c4c4;
  padding-top: 50 пикселей;
  цвет: # 000000;
  ширина: 400 пикселей;
  высота: 120 пикселей;
  box-shadow: -8px 0px 8px # 000000;
}  

  

  
    
    <стиль>
      h2 {
        выравнивание текста: центр;
        фон: # c4c4c4;
        padding-top: 50 пикселей;
        цвет: # 000000;
        ширина: 400 пикселей;
        высота: 120 пикселей;
        box-shadow: -8px 0px 8px # 000000;
      }
    
  
  
    
 W3Docs 
  
  

  

  
    
    <стиль>
      h2 {
        выравнивание текста: центр;
        фон: # c4c4c4;
        padding-top: 50 пикселей;
        цвет: # 000000;
        ширина: 400 пикселей;
        высота: 120 пикселей;
        box-shadow: 0 10px 10px # 000000;
      }
    
  
  
    
 W3Docs 
  
  

  

  
    
    <стиль>
      h2 {
        выравнивание текста: центр;
        фон: # c4c4c4;
        padding-top: 50 пикселей;
        цвет: # 000000;
        ширина: 400 пикселей;
        высота: 120 пикселей;
        box-shadow: 0px 10px 20px # 000000 вставка;
      }
    
  
  
    
 W3Docs 
  
  

  

  
    
    <стиль>
      тело {
        фон: #ccc;
        отступ: 20 пикселей;
      }
      .левый {
        плыть налево;
        маржа слева: 20 пикселей;
      }
      .коробка {
        ширина: 110 пикселей;
        высота: 110 пикселей;
        фон: #fff;
        цвет: # 9e9e9e;
        маржа: 0 авто;
        нижнее поле: 20 пикселей;
        выравнивание текста: центр;
        высота строки: 100 пикселей;
      }
      .shadow-bottom {
        box-shadow: 0 8px 10px -6px # 000000;
      }
      .shadow-top {
        box-shadow: 0 -8px 10px -6px # 000000;
      }
      .shadow-left {
        box-shadow: -8px 0 10px -6px # 000000;
      }
      .shadow-right {
        box-shadow: 8px 0 10px -6px # 000000;
      }
      .inner-shadow-bottom {
        box-shadow: вставка 0 8px 10px -6px # 000000;
      }
      .inner-shadow-top {
        box-shadow: вставка 0 -8px 10px -6px # 000000;
      }
      .inner-shadow-left {
        box-shadow: вставка 8px 0 10px -6px # 000000;
      }
      .inner-shadow-right {
        box-shadow: вставка -8px 0 10px -6px # 000000;
      }
    
  
  
    

      
 снизу 
      
 вверх 
      
 слева 
      
 вправо 
    
    

      
 верхняя вставка 
      
 нижняя вставка 
      
 левая вставка 
      
 правая вставка 
    
  
  

  box-shadow: [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [необязательный радиус распространения] [цвет];  

  box-shadow: rgba (149, 157, 165, 0.2) 0px 8px 24px;  

  box-shadow: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;  

  box-shadow: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;  

  box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;  

  box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;  

  box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px вставка;  

  box-shadow: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;  

  box-shadow: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;  

  box-shadow: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;  

  box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px вставка, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px вставка;  

  box-shadow: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46 , 170, 0.1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;  

  box-shadow: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46 , 170, 0.1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;  

  box-shadow: rgba (0, 0, 0, 0,09) 0px 2px 1px, rgba (0, 0, 0, 0,09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba ( 0, 0, 0, 0,09) 0 пикселей 16 пикселей 8 пикселей, rgba (0, 0, 0, 0,09) 0 пикселей 32 пикселей 16 пикселей;  

   
  
  
  
  
 < / head> 
  
 
 
 
 Стиль 4 
 
  
 
 
  
   

  .heading {
 выравнивание текста: по центру; 
} 
 .image-box {
 дисплей: блок; 
 крайнее левое: авто; 
 поле справа: авто; 
 box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px; 
}  

   
  
  
  
  
 < ссылка rel = "stylesheet" href = "styles.css "> 
  
  
 
 
 
 Стиль 4