Тени css: Генератор теней — 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;
}

На этом все.

Как добавить эффект Box Shadow через CSS в WordPress

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

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

Лучшее в Box Shadow — это то, что вы можете добавить эффект тени за пределами поля содержимого или внутри. Теперь вам может быть интересно, что означает поле содержимого. Проще говоря, поле содержимого — это не что иное, как элемент HTML, такой как P, DIV и т. Д.

Установка CSS Box Shadow

Синтаксис свойства Box-Shadow будет примерно таким.

box-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <spread-radius> <color>؛

горизонтальное смещение (требуется значение): это обязательное значение, и когда вы устанавливаете положительные значения (например, 10 пикселей), тень будет сдвигаться влево по горизонтали. Отрицательное значение (например, -10 пикселей) сдвинет тень вправо. Вы можете установить его на 0, если вам не нужно смещение тени.

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

радиус размытия (Требуется значение): это значение стирает тень, поэтому у нее нет резких краев. Чем выше вы установите значение, тем сильнее эффект размытия. Если вам не нужен эффект размытия, вы можете установить его на «0».

радиус распространения (Необязательное значение): это необязательное значение, которое распространяет оттенок на основе установленного вами значения. Чем выше значение, тем больше разница. Если вам не нужен эффект распространения, вы можете либо удалить значение, либо установить его на «0».

цвет (требуется значение): вы можете установить любой цвет, который хотите, используя шестнадцатеричный, RGB (красный, синий, зеленый, альфа), HLSA (оттенок, насыщенность, яркость, альфа) и именованные цвета HTML. Если вы не установите цвет, браузер установит цвет по умолчанию. Цвет по умолчанию полностью зависит от используемого вами браузера. Поэтому всегда рекомендуется устанавливать цвет.

Добавление тени блока CSS к изображению или блоку содержимого

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

.shadow-effect {
box-shadow: 3px 3px 10px 2px # a9a1a1؛
}

النتيجة:

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

.shadow-effect {
box-shadow: 5px 5px 0px 2px # a9a1a1؛
}

Как видите, я установил радиус размытия на 0 пикселей. Результирующий эффект тени имеет резкие края и выглядит примерно так.

Одна из самых безумных особенностей функции Box-Shadow заключается в том, что она позволяет добавлять множество оттенков. Для этого все, что вам нужно сделать, это указать значения, разделенные запятыми. Предложение будет выглядеть так.

.shadow-effect {
box-shadow: 10px 10px 0 blue، 15px 15px 0 red، 20px 20px 0 green؛
}

Добавив «inset» к свойству box-shadow, вы можете показать эффект тени внутри поля содержимого.

.shadow-effect {
box-shadow: inset 3px 3px 10px 2px # a9a1a1؛
}

النتيجة:

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

Генератор теней текста CSS

Если вы хотите добавить тень к тексту, вы должны использовать свойство Text-Shadow. Синтаксис очень похож на свойство Box-Shadow, но в свойстве Text-Shadow нет радиуса распространения. Вот формула.

text-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <color>؛

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

p {
text-shadow: 1px 1px 2px #333333;
}

В результате эффект будет примерно таким.

В отличие от свойства box-shadow, значение размытия в Text-Shadow не является обязательным. Это означает, что если вы не хотите, чтобы тень текста была размытой, вы можете либо удалить значение, либо установить его на «0».

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

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

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

Чтобы создать новый класс CSS, вы можете использовать расширение. Простой пользовательский CSS для WordPress Или через файл custom.css для большинства шаблонов WP. Вы также можете добавить код CSS в этот файл.

Затем дважды щелкните значок «Редактировать» для этой фотографии (который выглядит как карандаш). Под опцией Image CSS Class Advanced введите имя класса, которое вы определили в нашей таблице стилей. В этом случае имя класса — shadow-effect после того, как вы закончите сохранять изменения.

Затем нажмите «Сохранить черновик» или «Обновить», чтобы обновить страницу WordPress. Когда страница обновляется, результат выглядит так:

Только изображения с классом тени CSS будут иметь тень окна. Если в вашем сообщении в блоге 20 изображений, вам придется сделать это вручную, чтобы получить 20 изображений, что немного утомительно. Однако это сэкономит вам много времени при их редактировании в Photoshop.

Как видите, добавить эффект тени с помощью CSS несложно. Примеры, которые я здесь показал, — это только основы. Просто поиграйте с разными значениями, и вы увидите, насколько на самом деле эффективны свойства Box Shadow и Text Shadow. Для удобства использования вы можете использовать Генератор прямоугольной тени Также.

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

Источник

Цвет тени коробки — попутный ветер CSS

CSS Drop Shadows — A List Apart

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

Продолжение статьи ниже

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

Заинтересованы? Ну, во-первых, мы не хотели бы приписывать себе что-то, что мы не изобрели, а просто усовершенствовали. Эта конкретная техника была задумана и продемонстрирована Данстаном Орчардом, известным дизайнером 1976 года (снимаю шляпу перед вами, Данстан). Мы обнаружили, что это было легко, интуитивно понятно и работало как шарм. Однако при ближайшем рассмотрении мы увидели возможности для улучшения и приступили к работе.

Вот как это работает: вам нужно создать изображение с тенью в редакторе изображений по вашему выбору. Это должна быть только тень без видимой границы (простой способ сделать это — применить эффект к пустому выделению). Убедитесь, что ваше изображение достаточно велико, чтобы покрыть максимально ожидаемый размер блочных элементов, которые будут его использовать. На практике мы обнаружили, что 800 x 800 — вполне приличный размер. Сохраните его как GIF, убедившись, что вы используете цвет фона, к которому вы будете применять эффект. Кроме того, сохраните ту же тень с полной альфа-прозрачностью (без цвета фона) в формате PNG. Это будет использоваться для подачи лучшей тени в браузеры, способные ее отображать. Вот несколько примеров файлов: файл GIF/файл PNG.

Мы начнем с создания тени для изображения, а затем перейдем к другим элементам блока. В момент изобретательности мы решили назвать наш класс «img-shadow». Нашим испытуемым будет этот симпатичный кот:

И его соответствующая разметка (один div — единственная дополнительная разметка, которая нам понадобится):


  


На следующем рисунке показано, как работает этот метод:

Во-первых, наш ранее подготовленный теневой файл будет установлен в качестве фона для div.

фон: url(shadow.gif) без повторов внизу справа;

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

поле: -6px 6px 6px -6px;

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

Помните, мы говорили, что создадим лучшие тени для лучших браузеров? Эта строка сделает свое дело:

background: url(shadowAlpha. png) без повторов справа внизу !важно;

Этот бит «!important» сообщает браузеру, что объявление имеет приоритет над обычными объявлениями для того же элемента (см. спецификацию). Он также не поддерживается во всех версиях Internet Explorer, в которых также отсутствует встроенная поддержка прозрачных PNG. Это почти слишком удобно. Указав противоречивые объявления дважды, мы получим желаемое поведение (IE использует второе, большинство других браузеров — первое). Конечным результатом является то, что при изменении цвета фона браузеры, поддерживающие PNG, сохранят совершенно прозрачную тень. К сожалению, тень Проводника останется с исходным цветом фона.

Но почему это делает спросите вы? На это есть две причины:

• Мы можем : Это безболезненный, легкий и автоматический взлом, который дает отличные результаты в браузерах, которые его поддерживают.
• Это может исправиться само собой : Если новая версия Internet Explorer (поставляется с Longhorn) поддерживает оба этих стандарта, нам не придется ничего исправлять, чтобы получить в ней точные до пикселя, по-настоящему прозрачные тени.

Готовый код CSS выглядит так:


.img-shadow {
  float:left;
  фон: url(shadowAlpha.png) без повторов внизу справа !важно;
  фон: url(shadow.gif) без повторов внизу справа;
  margin: 10px 0 0 10px !важно;
  поле: 10 пикселей 0 0 5 пикселей;
  }

.img-shadow img {
  display: block;
  позиция: относительная;
  фоновый цвет: #fff;
  граница: 1 пиксель сплошная #a9a9a9;
  margin: -6px 6px 6px -6px;
  отступ: 4 пикселя;
  }

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

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

В следующей части мы применим эффект тени к абзацу.

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

При разработке этой методики мы обнаружили, что при работе с элементом блока, отличным от изображения, вопреки здравому смыслу Проводник решил обрезать левую и верхнюю части блока — те, которые «выскакивают» из тень — вне зависимости от того, что мы пробовали. Забавно, что единственная версия Explorer, которая делает это правильно, — 5.0. Никакие хаки, настройки переполнения или мягкие предложения, казалось, не помогли (и да, праведных проклятий судили). Мы сдались и решили, что нужен другой подход.

Метод, который мы придумали, частично основан на методологии раздвижных дверей Дугласа Боумана и требует дополнительной разметки (еще один div), поэтому наш абзац будет выглядеть так:

Вместо того, чтобы задавать абзацу отрицательные верхнее и левое поля, мы зададим ему положительное правое и нижнее отступы. Это откроет тень (установленную в качестве фона для самого внешнего div). Тогда мы будем подделка смещение тени с использованием частично прозрачного GIF в качестве фона для внутреннего div, который будет перекрывать тень. Убедитесь, что видимая часть этого изображения имеет тот же цвет, что и фон, поверх которого вы используете эффект тени. Назовите изображение «shadow2.gif». Он должен быть построен следующим образом:

Вот пример GIF-файла (это изображение, скорее всего, будет выглядеть как белое на белом в вашем браузере, поэтому вы можете сохранить его и просмотреть в программе редактирования изображений).

На этом рисунке показано, что мы собираемся сделать:

Ниже приведены стили, необходимые для достижения эффекта. Обратите внимание, что постороннее изображение и заполнение используются только Internet Explorer. Большинство других браузеров фактически игнорируют внутренний элемент div и придерживаются метода, который мы использовали для тени изображения.


.p-shadow {
  ширина: 90%;
  с плавающей запятой:левый;
  фон: url(shadowAlpha.png) без повторов внизу справа !важно;
  фон: url(shadow.gif) без повторов внизу справа;
  margin: 10px 0 0 10px !важно;
  поле: 10 пикселей 0 0 5 пикселей;
  }

.p-shadow div {
  фон: нет !важно;
  фон: url(shadow2.gif) без повторов слева вверху;
  заполнение: 0 !важно;
  padding: 0 6px 6px 0;
  }

.p-shadow p {
  color: #777;
  фоновый цвет: #fff;
  шрифт: курсив 1em georgia, с засечками;
  граница: 1 пиксель сплошная #a9a9a9;
  отступ: 4 пикселя;
  поле: -6px 6px 6px -6px !важно;
  маржа: 0;
  }

Те же соображения относительно цвета фона, что и в примере с изображением, применимы и к абзацам. Вот конечный результат. (Попробуйте изменить размер текста в браузере, чтобы увидеть, как меняется размер окна и как меняется тень.)

Дождь в Испании выпадает в основном на равнине.

Дополнительные примечания

В этой статье стили для изображения и абзаца были разбиты для ясности, но оба они могут быть определены одним махом с небольшими изменениями.

Этот метод был протестирован с браузерами на основе Gecko, Safari, Opera и IE 5.0+. Кроме отмеченных различий, никаких проблем не наблюдалось. Он должен хорошо работать с большинством существующих программ (нет, , а не Netscape 4.x).

Благодарности

Данстану за изобретение техники падающей тени и Дугласу Боуману за технику раздвижных дверей

CSS | Shadow Effect — GeeksforGeeks

Просмотр обсуждения

Улучшить статью

Сохранить статью

• Последнее обновление: 04 дек, 2018

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Свойство эффекта тени в CSS используется для добавления тени текста и изображений в документ HTML.

Тень текста: Свойство CSS text-shadow используется для отображения текста с тенью. Это свойство содержит длину, ширину и ширину тени в пикселях, а также цвет тени.

Синтаксис:

 Text-shadow: 3px 3px 3px зеленый; 

Example:

Выходные данные:

TextBox Shadow: Свойство CSS boxShadow применяет тень к текстовому полю. Это свойство содержит длину, ширину и ширину тени в пикселях, а также цвет тени.

Синтаксис:

 boxShadow: 3px 3px 3px зеленый; 

Пример:

Output:

Recommended Articles

Страница :

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

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

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

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

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

Пример:

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

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

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

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

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 желтый:
 
<дел>
Показывает многократное отражение теней.