Свойство box-shadow - это мощный инструмент, позволяющий придавать элементам объём и глубину с помощью тенью. Важно понимать, что такая графическая деталь абсолютно не влияет на фактические размеры или положение самого объекта в макете (даже если тень улетает далеко за его пределы). Однако здесь кроется нюанс: слои могут перекрывать друг друга - элементы, идущие в коде после текущего, смогут закрыть тень, а текущий элемент легко перекроет тени тех, что стоят перед ним. Кстати, вы можете поэкспериментировать и добавить сразу несколько теней для более сложного эффекта - просто перечислите их параметры через запятую: | Значение по умолчанию: | none | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.boxShadow="10px 10px 5px #888888" | Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS. | Значение | Описание | | смещение-x и смещение-y | Именно первые два параметра задают позицию тени. Значение смещения-x управляет сдвигом по горизонтали: отрицательные числа уводят тень влево. Смещение-y отвечает за вертикаль, где отрицательные значения поднимают тень выше элемента. Если вы поставите оба значения в 0, тень спрячется прямо под элементом и станет невидимой, ведь по умолчанию она такого же размера. (обязательные значения) | | размытие | Третий параметр определяет степень «мягкости». Чем больше число, тем сильнее размывается тень, становясь крупнее и светлее. Отрицательные значения здесь не работают. Если этот параметр пропустить или поставить 0, вы получите чёткую, резкую тень с острыми углами. (необязательное значение) | | размер тени | Четвёртое значение позволяет масштабировать тень: положительные числа увеличивают её со всех сторон, а отрицательные - сжимают. Если параметр отсутствует или равен 0, размер тени совпадает с размером элемента. (необязательное значение) | | цвет | Здесь вы задаёте оттенок тени. Варианты многообразны: можно использовать имя цвета, HEX-коды или синтаксис RGB(A) и HSL(A). Обязательно указывайте цвет явно! Иначе разные браузеры могут интерпретировать отсутствие значения по-разному, что сведёт на нет ваши ожидания. | | inset | Специальное ключевое слово для создания внутренней тени. Такой приём создаёт приятный эффект вдавленности: тень ложится поверх фона, но под текстом и другими содержимым элемента. Если этого слова нет, тень будет внешней (отбрасываемой). Ключевое слово можно ставить как первым, так и последним в списке параметров. (необязательное значение) | | none | Просто говорит о том, что тени нет вовсе. |
|