пример
Добавьте окно-тень на <div> элемент:
div
{
box-shadow: 10px 10px 5px #888888;
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Кассовые теневое свойство придает одно или несколько тени к элементу.
| Значение по умолчанию: | none |
|---|---|
| Наследование: | no |
| Animatable: | yes. Read about animatable Try it |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.boxShadow="10px 20px 30px blue" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| box-shadow | 10,0 4.0 -webkit- | 9.0 | 4.0 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
CSS Синтаксис
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; Note: Блок-теневое свойство придает одно или несколько тени к элементу. Свойство разделенный запятыми список теней, каждый задается 2-4 значений длины, необязательного цвета и необязательной вставки ключевого слова. Пропущенные длины равны 0.
Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| none | Значение по умолчанию. не отображается тень | Сыграй " |
| h-shadow | Необходимые. Положение горизонтальной тени. Отрицательные значения разрешены | Сыграй " |
| v-shadow | Необходимые. Положение вертикальной тени. Отрицательные значения разрешены | Сыграй " |
| blur | Необязательный. Размытость расстояние | Сыграй " |
| spread | Необязательный. Размер тени. Отрицательные значения разрешены | Сыграй " |
| color | Необязательный. Цвет тени. Значение по умолчанию является черным. Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета. Примечание: В Safari (on PC) требуется параметр цвета. Если вы не определяете цвет, тень не отображается на всех. | Сыграй " |
| inset | Необязательный. Изменяет тень от внешней тени (outset) к внутренней тени | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
Изображения , брошенные на стол
Этот пример демонстрирует , как создать "polaroid" фотографии и поворачивать изображения.
Похожие страницы
CSS3 учебник: CSS3 границы
HTML DOM ссылка: boxShadow property