Свойство CSS box-shadow позволяет задать тень элементу html. Используется дизайнерами сайтов довольно часто, чтобы как-то украсить и выделить рамки с текстом, изображения, сделать более читабельным контент.
Синтаксис CSS box-shadow
... box-shadow: X Y R1 R2 color [inset]; ...
Где:
- X - смещение по оси Х (горизонтали)
- Y - смещение по оси У (вертикали)
- R1 - размытие (чем больше значение, тем плавне переход)
- R2 - радиус растяжения (если положительный, то растягивает, отрицательный - сжимает)
- color - цвет (можно задавать в любом формате: #RGB, название цвета)
- inset - при наличии этого значения тень будет располагаться внутри блока (элемента)
Пример 1. HTML рамка с тенью box-shadow без смещения
Ниже представлен самый простой вариант использования тени свойством CSS box-shadow на странице html, когда она равномерно обтекает всю рамку без смещений.
<html> <head> <style> .primer1{ padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; } </style> </head> <body> <div class="primer1">Пример №1. Рамка с тенью</div> </body> </html>
На странице преобразуется в следующее
Пример 2. HTML рамка со смещенной тенью box-shadow
Практически тот же пример, что и первый, но только со смещением рамки.
<html> <head> <style> .primer2{ padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 1px 1px 2px 3px #a34b23; } </style> </head> <body> <div class="primer2">Пример №2. Рамка со смещенной тенью</div> </body> </html>
На странице преобразуется в следующее
Пример №3. Свечение рамки html
Реализация тени в виде свечения
<html> <head> <style> .primer3{ padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 20px #b04b66; } </style> </head> <body> <div class="primer3">Пример №3. Свечение</div> </body> </html>
На странице преобразуется в следующее
Пример 4. Внутреннее свечение границы html
Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset.
<html> <head> <style> .primer4{ padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 20px #b04b66 inset; } </style> </head> <body> <div class="primer4">Пример №4. Внутреннее свечение</div> </body> </html>
На странице преобразуется в следующее
Пример 5. Совмещение теней в html
Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.
<html> <head> <style> .primer5{ padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 3px #0f0 inset, 5px 5px 10px #00f, -5px -5px 10px #f00; } </style> </head> <body> <div class="primer5">Пример №5. Совмещение теней</div> </body> </html>
На странице преобразуется в следующее
Примечание: старые браузеры
IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow
- -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
- -moz-box-shadow - для Firefox до версии 4.0
Читайте также:
• Как сделать треугольник через CSS
• Свойство display
• Свойство text-shadow
• Свойство transform
• Свойство transform-origin
• Свойство border
• Свойство background
• Свойство transition
• Свойство nth-child
• font-weight
• Свойство overflow
• Свойство position relative
• Вендорные префиксы CSS