Css border shadow: box-shadow — CSS: Cascading Style Sheets

CSS Backgrounds and Borders Module Level 3: box-shadow Глава

Abstract

Этот документ содержит определение box-shadow свойство, которое было удалено из фона CSS3 и Модуль границ пока не стабилизируется.

Это обрывочный редакционный черновик, абсолютно нестабильный, и не имеет никакого официального статуса. Относитесь к нему так, как если бы вы приклейте записку на стол редактора.

Свойство box-shadow

Свойство box-shadow прикрепляет одну или несколько теней к коробке.

Где

   <тень>   = вставка? && [  <длина>  {2,4} &&  <цвет>  ? ] 

Компоненты каждого интерпретируются следующим образом:

• Первая длина — это горизонтальное смещение тени. А положительное значение рисует тень, смещенную вправо от коробка, отрицательная длина влево.
• Вторая длина — это вертикальное смещение. Положительное значение смещает тень вниз, отрицательную вверх.
• Третья длина — это радиус размытия. Отрицательные значения не допустимый. Если он равен 0, тень резкая, в противном случае чем больше значение, тем сильнее размыта тень. Точного алгоритма нет. указано.
• Четвертая длина — это радиус разброса. Положительные значения вызывают тень должна расти во всех направлениях по указанному радиусу. Отрицательные значения заставляют тень сжиматься. Тень не должна изменять форму при применении радиуса разброса: острые углы должны оставаться острым.
• Цвет — цвет тени.
• Ключевое слово »вставка», если оно присутствует, изменяет тень от внешней тени (та, которая затеняет коробку на холст, как бы приподнятый над холстом) во внутреннюю тень (тот, который затеняет холст на коробке, как если бы коробка была разрезана выходит из полотна и смещается за него).

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

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

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

Это все еще обсуждается. Пожалуйста, присылайте комментарии на www-style.

Однако, если у коробки есть border-image, тени рисуются иначе: они маскируются изображением границы вместо области границы следующим образом.

• Для внешней тени тень создается в предположении, что padding box непрозрачен, а затем комбинирует его с изображением границы для создания маски альфа-канала для тени. Значения спреда интерпретируется как увеличение размера поля заполнения и вызывает маска границы изображения должна быть соответственно изменена. Результирующая тень рисуется только за пределами отступа. коробка.
• Для внутренней тени тень создается в предположении, что все за пределами поля границы непрозрачно, а затем комбинируя это с border-image для создания маски альфа-канала для тени. Значения спреда интерпретируются как уменьшение размера рамки и вызывают маска границы изображения должна быть соответственно изменена. Результирующая тень рисуется только внутри границ рамки.

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

Если элемент имеет несколько полей, все они получают тени, но тени рисуются только там, где также должны быть нарисованы границы, см. «box-break».

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

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

Ниже приведены несколько примеров оранжевого блока с синей окантовкой. получает тень.

 граница: 5 пикселей сплошной синий;
цвет фона: оранжевый;
ширина: 144 пикселя;
высота: 144 пикселя; 

 радиус границы: 20 пикселей; 

 радиус границы: 0; 

 коробка-тень:
  RGBA(0,0,0,0,4)
  10 пикселей 10 пикселей; 

 коробка-тень:
  RGBA(0,0,0,0,4)
  10 пикселей 10 пикселей
  вставка 

 коробка-тень:
  RGBA(0,0,0,0,4)
  10 пикселей 10 пикселей 0
  10px /* разворот */ 

 коробка-тень:
  RGBA(0,0,0,0,4)
  10 пикселей 10 пикселей 0
  10px /* разворот */
  вставка 

Свойство »box-shadow» применяется к псевдоэлементу »::first-letter», но не псевдоэлемент »::first-line».

Ссылки

Нормативные ссылки

Другие ссылки

Индекс свойств

Индекс

CSS Outer Glow | UnusedCSS

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

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

Box-shadow описывается

• Горизонтальное и вертикальное смещения от краев целевого элемента
• Радиус размытия
• Радиус распространения
• Цвет

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

Теперь, когда у нас есть краткое введение в мир коробчатых теней, обратим внимание на основную тему этой статьи — внешнее свечение.

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

Давайте создадим этот эффект с помощью box-shadow.

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

 <дел>
   
Простое свечение
 
  <дел>
    
Неиспользуемый CSS