Css box shadow: box-shadow — CSS | MDN

1

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

где:

• 1

  h-shadow

  — смещение тени по горизонтали;

• 1

  v-shadow

  — смещение тени по вертикали;

• 1

  blur

  — размытие границ тени;

• 1

  spread

  — размер тени;

• 1

  color

  — цвет тени;

• 1

  inset

  — создать тень внутри элемента.

Порядок следования значений свойства

1

box-shadow

Простой пример использования

1

box-shadow

Браузеры Firefox, Chrome, Opera и IE9 отобразят серую тень под этим блоком.

Код, выводящий данный результат:

box-shadow: 5px 5px 2px #888;

Однако, приведенный пример будет не совсем работоспособным. Для браузеров Firefox и Chrome более ранних версий может понадобиться добавление префиксов. Тогда полная версия кода будет выглядеть следующим образом:

box-shadow: 5px 5px 2px #888;
-moz-box-shadow: 5px 5px 2px #888;
-webkit-box-shadow: 5px 5px 2px #888;

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

Примеры использования кода:

box-shadow: 5px 5px;
box-shadow: 5px 5px 2px;
box-shadow: 5px 5px 2px #888;
box-shadow: 5px 5px 2px 3px #888;
box-shadow: 5px 5px 2px 3px #888 inset;
box-shadow: 5px 5px 2px #888, -5px -5px #f4f4f4, 1px 1px 2px #cc6600;

Последняя строка наиболее интересна, поэтому разберем ее подробнее.

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

Теория

1

box-shadow

По умолчанию, для элемента создается внешняя тень.

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

Горизонтальное смещение определяет смещение тени относительно элемента по горизонтали. Может принимать положительное или отрицательное значение. При положительном значении тень смещается вправо от элемента. При отрицательном — влево от элемента.

Вертикальное смещение задает смещение тени по вертикали относительно элемента. Может рпинимать положительное или отрицательное значение. При положительном значении тень смещается относительно элемента вниз по вертикали. При отрицательном значении смещение происходит вверх по вертикали.

Третье и необязательное значение свойства box-shadow, это размытие

1

blur

Размер тени spread также явлется необязательным параметром и может принимать как положительные, так и отрицательные значения. При положительном значении тень увеличивается по всем направлениям. При отрицательном наоборот уменьшается.

Несколько примеров теней

Ниже приведены несколько небольших примеров создания теней с разными смещениями, размытием и размером.

В примере A смещение тени происходит влево и вверх на 5 пикселей.

  #Example_A {
  -moz-box-shadow: -5px -5px #888;
  -webkit-box-shadow: -5px -5px #888;
  box-shadow: -5px -5px #888;
}

В примере B точно также происходит смещение на пять пикселей вверх и влево, но при этом добавлено размытие тени величиной в 5 пикселей. Хорошо видно, что тень имеет нечеткие границы.

  #Example_B {
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888;
}

В примере С таже самая тень имеет размер в 5 пикселей.

  #Example_C {
  -moz-box-shadow: -5px -5px 0 5px #888;
  -webkit-box-shadow: -5px -5px 0 5px#888;
  box-shadow: -5px -5px 0 5px #888;
}

Пример D показывает тень, имеющую размытие в 5 пикселей и размер в 5 пикселей.

  #Example_D {
  -moz-box-shadow: -5px -5px 5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px 5px#888;
  box-shadow: -5px -5px 5px 5px #888;
}

В примере E показана тень, которая не имеет смещения по горизонтали и вертикали, но у нее задано размытие в 5 пикселей.

  #Example_E {
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

В примере F тень также не имеет смещения, но имеет размытие и размер в 5 пикселей.

  #Example_F {
  -moz-box-shadow: 0 0 5px 5px #888;
  -webkit-box-shadow: 0 0 5px 5px#888;
  box-shadow: 0 0 5px 5px #888;
}

На этом все.

Подробный обзор CSS Box Shadow

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

Примеры

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

Пример 1. Простая тень

Вот как можно придать элементу div тонкую серую тень.

 box-shadow: 0 0 10px серый; 

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

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

 box-shadow:  вставка  0 0 10px; 

Пример 3: Смещенная тень

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

 box-shadow:  5px 5px  10px; 

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

В следующем примере для смещения по горизонтали и по вертикали установлено значение -5px.

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

Теперь, когда вы увидели несколько примеров CSS box-shadow в действии, давайте копнем немного глубже.

Синтаксис

Общий синтаксис свойства box-shadow следующий:0064 [расстояние] [цвет] ;

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

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

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

Требуются только два значения свойства: смещение по горизонтали и смещение по вертикали. Четыре значения свойств, смещение по горизонтали, смещение по вертикали, радиус размытия и расстояние распространения, должны использовать единицы длины CSS (например, px, em, % и т. д.). Значение цвета должно быть единицей цвета CSS, например шестнадцатеричным значением ( например

#000000).

Сводка значений свойств

Значение свойств	Требуется?	Блок	Значение по умолчанию, если не указано
вкладыш	№	ключевое слово	Если вставка не указана, тень блока будет находиться за пределами HTML-элемента.
горизонтальное смещение	Да	длина	Нет значения по умолчанию. Необходимо указать.
вертикальное смещение	Да	длина	Нет значения по умолчанию. Это должно быть указано.
радиус размытия	№	длина	0
расстояние разброса	№	длина	0
цвет	№	цвет	Соответствует свойству цвета элемента(ов) HTML, к которым применяется тень блока.

вставка

Если присутствует значение свойства ключевого слова вставка , тень блока будет помещена внутрь элемента HTML.

 box-shadow:  вставка  0 0 5px 5px оливковый; 

Для сравнения, вот та же тень блока без свойства inset:

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

смещение по горизонтали

Значение смещения по горизонтали управляет положением тени блока по оси x. Положительное значение сдвинет тень блока вправо, а отрицательное значение сдвинет ее влево. В следующем примере смещение по горизонтали установлено на 20 пикселей или удвоено значение смещения по вертикали (которое установлено на 10 пикселей), поэтому тень становится в два раза шире по горизонтали.

 box-shadow:  20px  10px; 

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

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

Кроме того, поскольку значение отрицательное, положение тени смещено к верхней части блока.

 box-shadow: 10px  -20px  ; 

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

Значение свойства радиуса размытия влияет на размытость/резкость тени блока. Радиус размытия не является обязательным. Если вы не укажете его, по умолчанию он будет равен 0. Кроме того, он не может иметь отрицательное значение, в отличие от горизонтального и вертикального смещения. Если радиус размытия равен 0, тень блока будет резкой, а ее цвет — сплошным. По мере увеличения значения изображение будет становиться более размытым и непрозрачным.

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

 box-shadow: 5px 5px  20px  ; 

расстояние распространения

Расстояние распространения делает тень коробки больше или меньше во всех направлениях. Если он имеет положительное значение, тень блока будет увеличиваться со всех сторон. Если он имеет отрицательное значение, тень блока будет сжиматься со всех сторон.

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

 box-shadow: 0 0 10px  5px  ; 

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

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

color

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

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

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

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

  цвет: красный;  box-shadow: 0 0 10px 5px  синий  ; 

Множественные тени блока

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

 box-shadow:  [свойства тени 1]  ,  [свойства тени 2]  ,  [свойства тени n]  ; 

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

 box-shadow:  -5px -5px 30px 5px красный  ,  5px 5px 30px 5px синий  ; 

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

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

Примеры тени блока CSS

Вы можете увидеть живую демонстрацию всех примеров тени блока, используемых в этой статье, нажав кнопку ниже. Посмотреть демонстрацию

Связанный контент

• Разработка CSS для крупных веб-сайтов
• История сбросов CSS
• Список руководств по стилю CSS для вдохновения
• 5 библиотек CSS-эффектов, которые сделают ваш дизайн еще ярче

Свойство CSS box-shadow — GeeksforGeeks

Свойство box-shadow в CSS используется для придания эффекта тени фреймам элемента. К рамке элемента, разделенной запятой, можно применить несколько эффектов. Box-shadow можно описать с помощью смещений по осям X и Y относительно элемента, радиуса размытия и распространения, а также цвета.

Синтаксис:

 box-shadow: h-смещение v-смещение размытие цвет распространения |нет|вставка|начальный|
наследовать; 

Значение по умолчанию: Значение по умолчанию — нет.

Значение свойства:   Все свойства хорошо описаны в приведенном ниже примере.

• h-offset: Требуется задать положение тени по горизонтали. Положительное значение используется для установки тени с правой стороны поля, а отрицательное значение — для установки тени с левой стороны поля.
• v-offset: Требуется задать положение значения тени по вертикали. Положительное значение используется для установки тени ниже поля, а отрицательное значение используется для установки тени над полем.
• blur: Это необязательный атрибут, работа этого атрибута заключается в размытии тени коробки.

Синтаксис:

 box-shadow: h-смещение v-смещение размытие; 

Пример: Этот пример иллюстрирует использование box-shadow свойство, где применяются такие свойства, как h-offset, v-offset и blur вместе с их значениями.

HTML

Вывод:

распространение: Используется для установки размера тени. Размер спреда зависит от величины спреда.

Синтаксис:

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

Пример: В этом примере показано использование свойства box-shadow , где свойство распространения применяется для задания размера тени.

HTML

Вывод:

цвет: Используется для установки цвета тени.

Синтаксис:

 box-shadow: h-смещение v-смещение цвет; 

Пример: В этом примере показано использование свойства box-shadow , когда применяется другой цветовой оттенок.

HTML

Вывод:

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

Синтаксис:

 box-shadow: h-смещение v-смещение цветная вставка; 

Пример: В этом примере показано использование свойства box-shadow , где свойство inset применяется для создания тени внутри блока.

HTML

Вывод:

начальный : Используется для установки свойства box-shadow в значение по умолчанию.

Синтаксис:

 box-shadow: initial; 

Пример: В этом примере показано использование свойства box-shadow  , где начальное свойство применяется для установки его значений в значение по умолчанию.

HTML

Вывод:

наследовать : Это свойство унаследовано от его родителя.

нет: Это значение по умолчанию и оно не содержит каких-либо теневых свойств.

Поддерживаемые браузеры: Ниже перечислены браузеры, поддерживаемые свойством box-shadow :

• Google Chrome 10.0 4.0 -webkit-
• Internet Explorer 9.0 и более поздние версии (используйте border-collapse)
• Microsoft Edge .0
• Firefox 4.0 3.5 -moz-
• Safari 5.1 3.1 -webkit-
• Opera 10.5

Как использовать CSS box-shadow: 13 приемов и примеров

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

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

Что такое тень окна CSS?

Свойство box-shadow используется для применения тени к элементам HTML. Это одно из наиболее часто используемых свойств CSS для стилизации блоков или изображений.

Синтаксис CSS:

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

1. смещение по горизонтали: Если смещение по горизонтали положительное, тень будет справа от прямоугольника. А если горизонтальное смещение отрицательное, тень будет слева от поля.
2. смещение по вертикали:  Если смещение по вертикали положительное, тень будет ниже поля. И если вертикальное смещение отрицательное, тень будет выше блока.
3. радиус размытия: Чем выше значение, тем более размытой будет тень.
4. радиус распространения: Означает, насколько должна распространяться тень. Положительные значения увеличивают распространение тени, отрицательные значения уменьшают распространение.
5. Цвет:  Обозначает цвет тени. Кроме того, он поддерживает любой цветовой формат, такой как rgba, hex или hsla.

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

Вы можете добавить очень тусклые тени к трем сторонам (слева, справа и снизу) блока, используя следующий CSS-код box-shadow с вашим целевым элементом HTML:

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

Вывод:

2. Добавьте тусклую тень ко всем сторонам

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

 box-shadow: rgba(100, 100, 111, 0. 2) 0px 7px 29пкс 0пкс; 

Вывод:

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

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

Вывод:

4. Добавьте темную тень ко всем сторонам

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

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

Вывод:

5. Добавьте тень на все стороны

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

 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) 0 пикселей 12 пикселей 13 пикселей, rgba (0, 0, 0, 0,09) 0 пикселей -3 пикселей 5 пикселей; 

Вывод:

6.

Добавьте тонкую тень границы со всех сторон

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

 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 inset ; 

Вывод:

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

 box-shadow: rgba(0, 0, 0, 0.1) -4px 9пкс 25пкс -6пкс; 

Вывод:

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

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

Вывод:

9. Добавьте тонкую цветную тень границы со всех сторон

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

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

Вывод:

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

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

Вывод:

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

 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) 0 пикселей 20 пикселей, rgba (240, 46, 170, 0,05) 0 пикселей 25 пикселей; 

Вывод:

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

 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) 20 пикселей 20 пикселей, rgba (240, 46, 170, 0,05) 25 пикселей 25 пикселей; 

Вывод:

13. Добавьте светлые тени слева и справа, растяните тень снизу

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

 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 пикселей; 

Вывод:

Интеграция CSS с HTML-страницей

Теперь вы знаете, как добавлять классные эффекты теней с помощью CSS, и можете легко интегрировать их с элементами HTML несколькими способами.

Связано: 11 полезных инструментов для проверки, очистки и оптимизации файлов CSS

Вы можете встроить его в HTML-страницу или прикрепить как отдельный документ. Есть три способа включить CSS в документ HTML:

Внутренний CSS

Встроенные или внутренние таблицы стилей вставлены в Раздел документа HTML, использующий элемент

Стиль 4

Встроенный CSS

Встроенный CSS используется для добавления уникальных правил стиля к элементу HTML. Его можно использовать с элементом HTML через атрибут стиля . Атрибут стиля содержит свойства CSS в виде «свойство: значение» , разделенных точкой с запятой ( ; ).

Связано: Узнайте, как создавать двухмерные веб-сайты с помощью CSS Grid

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

  
  
  
  
  
  
  
 
 
  
Стиль 4
 
 
  
 
 
  
  

Внешний CSS

Внешний CSS — это самый идеальный способ применить стили к HTML-документам. Внешняя таблица стилей содержит все правила стиля в отдельном документе (файле .css), затем этот документ связывается с HTML-документом с помощью <ссылка> тег. Этот метод лучше всего подходит для определения и применения стилей к HTML-документам, поскольку затронутый HTML-файл требует минимальных изменений в разметке. Вот пример, демонстрирующий, как использовать внешний CSS с документом HTML:

Создайте новый файл CSS с расширением .css . Теперь добавьте в этот файл следующий код CSS:

.

 .heading { 
 text-align: center; 
 } 
 .image-box { 
 display: block; 
 поле слева: авто; 
 поле-справа: авто; 
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
 } 

Наконец, создайте HTML-документ и добавьте в него следующий код:

  
  
  
  
  
  
  
  
 
 
  
Стиль 4
 
 
  
 
 
  
  

Обратите внимание, что файл CSS связан с документом HTML через тег и атрибут href .

Все три вышеуказанных метода (внутренний CSS, встроенный CSS и внешний CSS) будут отображать один и тот же результат –

.

Сделайте свою веб-страницу элегантной с помощью CSS

Используя CSS, вы полностью контролируете стиль своей веб-страницы. Вы можете настроить каждый элемент HTML, используя различные свойства CSS. Разработчики со всего мира вносят свой вклад в обновления CSS, и они делают это с момента его выпуска в 1996. Таким образом, новичкам есть чему поучиться!

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

Тень окна CSS

— TutorialBrain

CSS Box Shadow

Итак, прежде чем мы продолжим, сначала давайте разберемся –

Что такое Box Shadow ?

Свойство Box-shadow аналогично свойству тени границы и добавляет тень вокруг границ.

box-shadow uses these following attributes –

• x-offset
• y-offset
• color
• blur-radius
• spread-radius
• inset
• initial
• inherit
• none

Примечание/информация

По умолчанию, box-shadow: нет; поэтому по умолчанию тени блока нет.

Обратите внимание, что x-смещение и y-смещение являются обязательными для box-shadow. Чтобы понять это, пожалуйста, посмотрите ниже-

Примеры CSS Box-shadow

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

Тень границы CSS. Элемент окружен горизонтальной и вертикальной тенью блока с внутренней позицией. Это прекрасный пример встроенной границы CSS.

Использование смещений по x и y в box-shadow

Смещение по x и y являются обязательными для border-shadow.

1. x-offset — это горизонтальное смещение (смещение по оси X) тени блока.
2. y-offset — вертикальное смещение (смещение по оси Y) тени блока.

Синтаксис Box-shadow(Type-1):

box-shadow : x-смещение y-смещение ;

• Если x-смещение > 0, то тень будет направлена ​​к правой стороне прямоугольника.
• Если x-offset< 0, то тень будет направлена ​​к левой стороне прямоугольника.

• Если y-смещение > 0, то тень будет направлена ​​к нижней стороне блока, что означает, что тень будет ниже блока.
• y-offset<0, тогда тень будет направлена ​​к верхней стороне блока, что означает, что тень будет в верхней части блока.

Пример теневой рамки (Тип 1) — с использованием только смещения по оси x и смещения по оси y Ссылка на сайт

 #бокс-граница-л {
  граница: 2 пикселя сплошного красного цвета;
  отступ: 10 пикселей;
  коробка-тень: 20px 05px;
}

#бокс-граница-2 {
  граница: 4 пикселя сплошного зеленого цвета;
  отступ: 10 пикселей;
  коробка-тень: -20px -10px;
}
 

Подписаться на @tutorial_brain

Использование цвета в box-shadow

цвет всегда необязательный в box-shadow. color определяет цвет тени и по умолчанию принимает цвет текста.

Синтаксис Box-shadow(Type-2):
box-shadow : x-смещение y-смещение цвет ;

Пример теневой рамки (тип 2) — с цветом

 #box-border-color {
  граница: 2 пикселя сплошного красного цвета;
  отступ: 10 пикселей;
  box-shadow: 5px 10px желтый;
}
 

Подписаться на @tutorial_brain

Использование радиуса размытия в box-shadow

радиус размытия – это , всегда необязательный в box-shadow. Blur-radius делает тень немного тусклой и туманной. Чтобы сделать тень более туманной, задайте более высокое значение радиуса размытия. Иногда мы часто забываем о непрозрачности тени блока, которая является непрозрачностью блока. Насколько менее прозрачен ящик тени? Обычно непрозрачность тени блока можно контролировать атрибутом цвета тени блока, но вы должны изменить значение blur-radius , чтобы увидеть его влияние на прозрачность теней.

Синтаксис Box-shadow(Type-3):
border-shadow : x-смещение y-смещение цвет радиуса размытия ;

Пример теневой рамки (Тип 3) - с радиусом размытия

 #box-border-blur-color {
  граница: сплошной помидор 2px;
  отступ: 10 пикселей;
  box-shadow: -20px -10px 5px розовый;
}
 

Подписаться на @tutorial_brain

Использование расширенного радиуса в box-shadow

расширенный радиус равно alw необязательно в box-shadow и делает тень больше или меньше.

Чтобы сделать тень больше, задайте большее значение радиуса распространения.

Синтаксис Box-shadow (Type-4):
box-shadow : x-смещение y-смещение радиус размытия радиус распространения цвет ;

Пример теневого ящика (Тип 4) - с радиусом раскрытия

 #box-border-spread1-color {
  граница: сплошной помидор 2px;
  отступ: 10 пикселей;
  box-shadow: 20px -10px 12px 25px розовый;
}

#box-border-spread2-color {
  граница: 3 пикселя сплошного синего цвета;
  отступ: 10 пикселей;
  box-shadow: -30px 15px 15px -20px зеленый;
}
 

Использование нескольких значений, разделенных запятыми, в box-shadow

Box-shadow также может содержать несколько значений. Для этого просто разделите каждое значение запятыми, как показано ниже:

Синтаксис Box-shadow(Type-5):
box-shadow : x-смещение y-смещение, x-смещение y-смещение цвет, x-смещение y-смещение цвет радиуса размытия ;

Примечание. Это не общий синтаксис, а скорее пример того, как можно получить синтаксис нескольких теней с помощью запятых

Пример теневого окна (тип 5) — с несколькими тенями

 .box-multiple-values ​​{
  граница: 5 пикселей цвета морской волны;
  цвет фона: розовый;
  отступ: 10 пикселей;
  box-shadow:5px 8px, 1em -5px 8px rgba(0, 1, 0.4, 0.6), 10px 5px 6px 4px оранжевый;
}
 

Подписаться на @tutorial_brain

Использование вставки в box-shadow

Вставка всегда необязательна и создаст тень от внешней стороны к внутренней стороне.

Синтаксис Box-shadow(Type-6):
box-shadow : x-смещение y-смещение радиус размытия радиус распространения цвет вставки ;

Пример теневой рамки (тип 6) — со вставкой

 #box-border-inset-color {
  граница: 20px сплошной пудрово-голубой;
  отступ: 10 пикселей;
  box-shadow: 15px 10px 15px 20px вставка оранжевого цвета;
}
 

Подписаться на @tutorial_brain

Использование наследования в box-shadow

Наследование всегда необязательно и будет приобретать (получать) атрибуты и свойства от своего родителя.

Примечание/информация Вы можете использовать его независимо в свойстве box-shadow. Это означает, что не следует кодировать значения x-offset и y-offset при определении box-shadow:inherit;

Синтаксис Box-shadow (Type-7):
box-shadow : наследовать;

Пример теневого окна (тип 7) - с наследованием

 .parent {
  граница: 5px сплошной зеленый цвет;
  цвет фона: розовый;
  отступ: 10 пикселей;
  box-shadow: 10px 5px 10px желтый;
}

.ребенок {
  граница: 3 пикселя сплошного синего цвета;
  цвет фона: красный;
  отступ: 10 пикселей;
  box-shadow: наследовать; /*необязательно, так как в этом случае он уже получает родительское свойство*/
}
 

Подписаться на @tutorial_brain

Использование инициала в box-shadow

Начальный номер всегда необязателен.

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

Примечание/информация Используйте его независимо в свойстве box-shadow и не кодируйте значения x-offset и y-offset при определении box-shadow:initial;

Синтаксис Box-shadow (Type-8):
box-shadow :  начальный;

Фейсбук Твиттер Гугл плюс

CSS-тень окна | Как свойство box-shadow работает в CSS

CSS box-shadow определяется как свойство, которое прикрепляет тени к указанному элементу. Это добавляет глубокий дизайн при создании веб-сайта без необходимости использования изображений и других элементов-контейнеров. Это свойство отделяет блок от фона, просто рисуя границы. Это просто мощное свойство в CSS, которое может быть достигнуто для создания 8 эффектов тени бумажной жизни. Свойство Box-shadow обеспечивает двумерные эффекты на веб-странице.

Синтаксис и параметры:

 box-shadow: none|h-offset v-offset | размытие | распространение |цвет |вставка|начальный|наследовать; 

Здесь за двумя значениями обычно следуют остальные значения.

Пример:

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

 #демо1
{
Box-shadow: 5px, 10px, красный; // Здесь указано смещение-x, y, значение цвета.
} 

Как свойство box-shadow работает в CSS?

Box-shadow CSS имеет шесть различных значений этого свойства.

1. inset

Это значение создает тень внутри блока, используя свойство тени, поскольку оно не может создать тень снаружи. Это объявляется либо в начале, либо в конце свойства. В некоторых ситуациях это может быть опущено.

Пример:

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

2. color

Устанавливает цвет теневой рамки.

3. смещение по горизонтали

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

Пример:

box-shadow : 30px 20px;

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

4. вертикальное смещение

Отображает положение тени блоков по оси Y. Здесь положительное значение уменьшается, а отрицательное значение увеличивается.

Пример с отрицательными значениями:

Box-shadow: 20 px -10 px; здесь отрицательное значение перемещает тень вверх.

5. Размытие

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

Пример:

Box-shadow: 4px 4px 10px;

6. Расстояние распространения

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

Пример:

Box-shadow: 0 20px 20px -4px;

Среди этих шести значений важное значение придается двум значениям, таким как СМЕЩЕНИЕ по горизонтали и вертикали. За исключением значений цвета и вставки, длина CSS равна px, em и процентам, а значение цвета использует шестнадцатеричные значения.

Примеры CSS box-shadow

Ниже приведены примеры:

Пример #1

Использование значения свойства inset.

Здесь тень границы отражается внутри красным цветом.

Код:

 

<голова>
<стиль>
цитата {
ширина: 60%;
поле: 45px авто;
отступ: 22px;
размер шрифта: 20px;
box-shadow: вставка 12px 4px красного цвета;
}


<тело>
 
 Мудрые цитаты с использованием свойства inset 
<цитата>
Если вы пытаетесь достичь чего-то, будут препятствия.  они у меня были; они были у всех. Но препятствия не должны вас останавливать. Если вы столкнулись со стеной, не поворачивайтесь и не сдавайтесь. Выясните, как взобраться на него, пройти через него или обойти его.
Подробнее читайте на странице https://www.brainyquote.com/topics/wisdom-quotes.
– Майкл Джордан


 

Вывод:

Пример #2

Использование значения цвета.

Код:

 

<голова>

<стиль>
.adc1 {
граница: сплошная 1,5 пикселя;
отступ: 10 пикселей;
box-shadow: 6px 9px 9px 9px оранжевый;
}
.adc2 {
граница: сплошная 1,5 пикселя;
отступ: 10 пикселей;
box-shadow: 6px 9px 9px 20px желтый;
}


<тело>

 
Добро пожаловать в подборку популярных стилей CSS
 




Учебник онлайн-класса


 

Вывод:

Пример #3

Использование нескольких теней на коробке.

Используя одно свойство box-shadow, мы можем добавить несколько теней к элементу. Таким образом, можно указать любое количество оттенков с разными цветами, но они должны быть разделены запятыми. В приведенном ниже коде box-shadow указывает три разных цвета. box-shadow: 4px 4px красный, 12px 12px зеленый, 16px 16px желтый.

Код:

 

<голова>
<стиль>
#несколько1 {
граница: сплошная 1px;
отступ: 10 пикселей;
box-shadow: 4px 4px красный, 12px 12px зеленый, 16px 16px желтый;
}
#несколько2 {
граница: сплошная 1px;
отступ: 10 пикселей;
box-shadow:4px 4px 10px коричневый, 11px 11px 7px зеленый, 16px 16px 7px синий;
}


<тело>
 
box-shadow: 4px 4px красный, 12px 12px зеленый, 16px 16px желтый:
 
<дел>
Показывает многократное отражение теней.