Css box shadow отключить

box-shadow

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Краткая информация

Синтаксис

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

none Отменяет добавление тени. inset Тень выводится внутри элемента. <сдвиг по x>Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. <сдвиг по y>Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. Положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

Пример

Результат примера показан на рис. 1.

Объектная модель

Объект.style.boxShadow

Примечание

Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 поддерживают свойство -webkit-box-shadow .

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow .

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow , взамен можно использовать свойство filter :

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает чёткую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow .

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселях.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

Рецепты

Источник

box-shadow

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

Значения

none Отменяет добавление тени. inset Тень выводится внутри элемента. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр. размытие Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой. растяжение Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. цвет Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

HTML5 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают свойство -webkit-box-shadow .

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow .

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow , взамен можно использовать нестандартное свойство filter :

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow .

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Источник

Свойство box-shadow

Свойство box-shadow задает тень блоку. В качестве значения свойство принимает 6 параметров, перечисляемые через пробел, либо ключевое слово none , отменяющее тень совсем.

Синтаксис

Параметры

Параметр	Описание
inset	Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан — то снаружи.
сдвиг по x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой.
размер тени	Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан — тень будет такого же размера, что и элемент.
цвет	Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.

Пример

В данном примере тень сдвинута вниз и вправо и добавлено небольшое размытие:

Пример . Четкая тень

В данном примере тень сдвинута вниз и вправо, но размытия нет (тень будет четкой):

Пример . Равномерная тень

В данном примере тень не сдвинута, но к ней добавлено размытие:

Пример . Размер тени

В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное — это граница, красное — это тень):

Пример . Размытие + размер тени

В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное — это граница, красное — это тень):

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

Смотрите также

Источник

box-shadow

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом.

Интерактивный пример

Свойство box-shadow включает отбрасывание тени от границ практически любого элемента. Если для элемента с тенью задан border-radius , то отбрасываемая тень также будет с закруглёнными углами. Порядок наложения нескольких теней такой же, что и у текстовых теней: первая указанная тень будет поверх остальных.

Генератор теней — интерактивный инструмент, позволяющий сгенерировать значение для box-shadow .

Синтаксис

/* Ключевые слова */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Любое количество теней через запятую */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Глобальные значения */ box-shadow: inherit; box-shadow: initial; box-shadow: revert; box-shadow: revert-layer; box-shadow: unset; 

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

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

Значения

Если не указано (по умолчанию), то тень будет отбрасываться от элемента (придавая эффект выпуклости блоку). Наличие ключевого слова inset отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Внутренние тени начинаются с рамок элемента (даже если они прозрачные), над фоном элемента, но не под его содержимым.

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

Интерполяция

Каждая тень в списке ( none считается за пустой список) интерполируется через значения цвета x, y, радиуса размытия и (когда это допустимо) и радиуса расширения. Для каждой тени, если обе входные тени отмечены как inset или ни одна из них таковой не является, то интерполированная тень будет соответствовать входным теням. Если в любой паре входных теней одна из них является внутренней ( inset ), а другая нет, то список теней не интерполируется. Если количество теней отличается в разных списках, то более короткий список дополняется в конце тенями, цвет которых прозрачен ( transparent ), все значения длин равны 0 , и где inset соответствует более длинному списку.

Формальное определение

Начальное значение	none
Применяется к	все элементы. Это также применяется к ::first-letter .
Наследуется	нет
Обработка значения	любая абсолютная длина; работает любой указанный цвет; если другое не указано
Animation type	список теней

Формальный синтаксис

box-shadow =
none | (en-US)
# (en-US)

=
? (en-US) && (en-US)
[ (en-US) (en-US) ? (en-US) ? (en-US) ] (en-US) && (en-US)
inset? (en-US)

Примеры

Добавление трёх теней

В этом примере применяется сразу три тени: внутренняя тень, обычная внешняя отбрасываемая тень, а также тень размером 2 пикселя, имитирующая рамку (для создания рамки можно было воспользоваться outline (en-US)).

HTML

blockquote>q>Меня уколют ваши речи,br/> Об ваши взгляды обожгусь,br/> И ранит ложь сильней картечиbr/> Но все равно я поднимусь.q> p>— Майя Энджелоуp> blockquote> 

CSS

blockquote  padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); > 

Результат

Использование нулевых значений для смещений и радиуса размытия

Когда смещение по X ( x-offset ), смещение по Y ( y-offset ) и радиус размытия ( blur ) равны нулю, тень будет представлять собой цветной контур одинакового размера на всех сторонах блока. Тени отображаются с конца списка, поэтому первая тень накладывается поверх последующих. Когда в border-radius указано значение по умолчанию 0 , углы тени становятся прямыми углами. Соответственно, если указать в border-radius любое другое значение, углы станут закруглёнными.

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

HTML

Источник