Html тень блока: box-shadow | htmlbook.ru

Размытые или объемные, цветные или многослойные тени создают удивительные эффекты для элементов.

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

1. Тень для текста

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

    IE: 10.0
    Firefox: 3.5
    Chrome: 2.0
    Safari: 4.0
    Opera: 9.6
    iOS Safari: 7. 1
    Opera Mini: 8, без радиуса размытия
    Android Browser: 4.1
    Chrome for Android: 44

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

Для создания каждой тени задаются цвет и три длины (смещение по оси Х, смещение по оси Y, радиус размытия). Если значения длин отрицательные, то тень смещается влево и вверх от текста.

Радиус размытия определяется как расстояние от контура тени до края эффекта размытия.

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

Данный эффект по-разному отображается в различных браузерах. Наследуется.

text-shadow
Значения:
x-offset	Обязательное значение. Смещение тени по горизонтали относительно текста. Может принимать как положительные, так и отрицательные значения.
y-offset	Обязательное значение. Смещение тени по вертикали относительно текста. Может принимать как положительные, так и отрицательные значения.
blur	Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень.
color	Необязательное значение. По умолчанию принимает цвет текста. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none	Отсутствие тени текста.

2. Тень для блока

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

    IE: 9.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7. 1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 42

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

box-shadow
Значения:
x-offset	Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево.
y-offset	Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх.
blur	Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения.
растяжениеem / px	Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения.
color	Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha). Для Safari цвет тени указывать обязательно.
inset	Позволяет создать тень внутри блока.
none	Отсутствие тени.

box-sizing — CSS: каскадные таблицы стилей

CSS-свойство box-sizing задает способ расчета общей ширины и высоты элемента.

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

Свойство box-sizing можно использовать для настройки этого поведения:

• content-box задает поведение CSS box-sizing по умолчанию. Если вы установите ширину элемента на 100 пикселей, то поле содержимого элемента будет иметь ширину 100 пикселей, а ширина любой границы или отступа будет добавлена ​​к окончательной отображаемой ширине, что сделает элемент шире 100 пикселей.
• border-box указывает браузеру учитывать любые границы и отступы в значениях, которые вы указываете для ширины и высоты элемента. Если вы установите ширину элемента равной 100 пикселям, эти 100 пикселов будут включать любую добавленную вами границу или отступ, а поле содержимого сожмется, чтобы поглотить эту дополнительную ширину. Обычно это значительно упрощает определение размеров элементов. box-sizing: border-box — это стиль по умолчанию, который браузеры используют для , и <Кнопка> Элементы и для <Ввод> Элементы, тип которого составляет Radio , флажок , Сброс , кнопка , Отправить , Color , OR, или , Отправить , . поиск .

  Примечание: Часто бывает полезно установить box-sizing на border-box для размещения элементов.

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

   проклейка коробок: рамка-коробка;
  box-sizing: контент-бокс;
  /* Глобальные значения */
  box-sizing: наследовать;
  размер коробки: начальный;
  размер окна: вернуться;
  box-sizing: revert-layer;
  box-sizing: не установлено;
   

  Свойство box-sizing задается как одно ключевое слово, выбранное из списка значений ниже.

  Значения

  поле содержимого

  Это начальное значение и значение по умолчанию, как указано в стандарте CSS. Свойства width и height включают содержимое, но не включают отступы, границы или поля. Например, .box {width: 350px; border: 10px сплошной черный;} отображает прямоугольник шириной 370px.

  Здесь размеры элемента рассчитываются как: ширина = ширина содержимого

  и высота = высота содержимого . (Границы и отступы не учитываются при расчете.)

  бордюр

  Свойства width и height включают содержимое, отступы и границы, но не включают поля. Обратите внимание, что отступы и границы будут внутри блока. Например, .box {width: 350px; border: 10px сплошной черный;} отображает поле шириной 350px с областью для содержимого шириной 330px. Поле содержимого не может быть отрицательным и равно 0, что делает невозможным использование 9.0004 border-box , чтобы элемент исчез.

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

  ширина = граница + отступы + ширина содержимого и высота = граница + отступы + высота содержимого .

  Исходное значение	content-box
  Применяется к	всем элементам, которые принимают ширину или высоту0136
  Вычисленное значение	как указано
  Тип анимации	дискретный

   box-sizing = 
   content-box | 
   border-box 

  Размеры блоков с content-box и border-box

  В этом примере показано, как разные значения box-sizing изменяют отображаемый размер двух одинаковых элементов.

  HTML

   
  Контент
  
  
  Граница
   

  CSS

   раздел {
    ширина: 160 пикселей;
    высота: 80 пикселей;
    отступ: 20 пикселей;
    граница: 8px сплошной красный цвет;
    фон: желтый;
  }
  .content-box {
    box-sizing: контент-бокс;
    /* Общая ширина: 160 пикселей + (2 * 20 пикселей) + (2 * 8 пикселей) = 216 пикселей
       Общая высота: 80 пикселей + (2 * 20 пикселей) + (2 * 8 пикселей) = 136 пикселей. 
       Ширина блока содержимого: 160 пикселей.
       Высота блока содержимого: 80 пикселей */
  }
  .border-box {
    box-sizing: граница-коробка;
    /* Общая ширина: 160 пикселей
       Общая высота: 80 пикселей
       Ширина блока содержимого: 160 пикселей - (2 * 20 пикселей) - (2 * 8 пикселей) = 104 пикселей.
       Высота блока содержимого: 80 пикселей - (2 * 20 пикселей) - (2 * 8 пикселей) = 24 пикселей */
  }
   

  Результат

  
  # размеры
  # размером
  # размером
  . Включите JavaScript для просмотра данных.
  • Коробчатая модель CSS

  Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

  Хотите принять участие?

  Узнайте, как внести свой вклад.

  Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

  box-pack — CSS: каскадные таблицы стилей

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

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

  Предупреждение: Это свойство исходного черновика модуля CSS Flexible Box Layout, которое было заменено более новым стандартом. См. flexbox для получения информации о текущем стандарте.

  Свойства CSS -moz-box-pack и -webkit-box-pack определяют, как -moz-box или -webkit-box упаковывает свое содержимое в направлении макет. Эффект от этого виден только в том случае, если в коробке есть лишнее место.

   /* Значения ключевых слов */
  коробка-упаковка: старт;
  коробка-упаковка: центр;
  коробка-упаковка: конец;
  коробка-упаковка: обосновать;
  /* Глобальные значения */
  коробка-упаковка: наследовать;
  коробка-упаковка: начальная;
  коробка-упаковка: не установлена;
   

  Направление компоновки зависит от ориентации элемента: горизонтальное или вертикальное.

  Свойство box-pack указано как одно из значений ключевого слова, перечисленных ниже.

  Значения

  пуск

  Коробка упаковывает содержимое в начале, оставляя лишнее место в конце.

  центр

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

  конец

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

  выравнивание

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

  Край коробки, обозначаемый началом для целей упаковки, зависит от ориентации и направления коробки:

  • Для горизонтальных элементов начало является верхним краем.
  • Для вертикальных элементов начало — это левый край.

  Спецификация
  CSS BOX SIZE MODULE 3 # размером

  	Обычный	Реверс
  Горизонтальный	ушел	справа
  Вертикальный	топ	дно

  Ребро, противоположное началу, обозначается как конец .

  Если упаковка задана с использованием атрибута элемента pack , то стиль игнорируется.

  Начальное значение	СТАРТ
  Применяет к	Элементы 9000-BOX-BOX-BOX4-BOX4-BOX4-BOX4-BOX. или -вебкит-инлайн-коробка
  Inherited	no
  Computed value	as specified
  Animation type	discrete

   box-pack =
    начать | центр | конец | оправдывать
   

  Примеры box-pack

   div. example {
    стиль границы: сплошной;
    дисплей: -moz-box; /* Мозилла */
    дисплей: -webkit-box; /* Веб-кит */
    /* Сделать эту коробку выше дочерних,
       так что есть место для коробки-упаковки */
    высота: 300 пикселей;
    /* Сделайте это поле достаточно широким, чтобы показать содержимое
       центрированы по горизонтали */
    ширина: 300 пикселей;
    /* Дети должны быть ориентированы вертикально */
    -moz-box-orient: вертикальный; /* Мозилла */
    -webkit-box-orient: вертикальный; /* Веб-кит */
    /* Выравнивание дочерних элементов по горизонтальному центру этого блока */
    -moz-box-align: по центру; /* Мозилла */
    -webkit-box-align: по центру; /* Веб-кит */
    /* Упаковать дочерние элементы в нижнюю часть этого блока */
    -moz-box-pack: конец; /* Мозилла */
    -webkit-box-pack: конец; /* Веб-кит */
  }
  div.example p {
    /* Делаем дочерние элементы более узкими, чем их родитель,
       так что есть место для box-align */
    ширина: 200 пикселей;
  }
   

   <дел>
  Я буду вторым снизу div.