Свойство css box-shadow против фильтра drop-shadow filter: подробное сравнение

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Compatibilidade com navegadores

Css background-repeat свойство

Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar! (en-US)

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	10.0 1.0-webkit (en-US)	(Yes)	4.0 (2.0)3.5 (1.9.1)-moz (en-US)	9.0	10.5	5.1 3.0 -webkit (en-US)
Multiple shadows	10.0 1.0-webkit (en-US)	(Yes)	4.0 (2.0)3.5 (1.9.1)-moz (en-US)	9.0	10.5	5.1 3.0 -webkit (en-US)
keyword	10.0 4.0-webkit (en-US)	(Yes)	4.0 (2.0)3.5 (1.9.1)-moz (en-US)	9.0	10.5	5.1 5.0 -webkit (en-US)
Spread radius	10.0 4.0-webkit (en-US)	(Yes)	4.0 (2.0)3.5 (1.9.1)-moz (en-US)	9.0	10.5	5.1 5.0 -webkit (en-US)

Feature	Edge	Safari Mobile	Opera Mini	Opera Mobile	Android
Basic support	(Yes)	5.0(Yes)-webkit (en-US)	?	(Yes)	(Yes)-webkit (en-US)
Multiple shadows	(Yes)	5.0(Yes)-webkit (en-US)	?	?	?
keyword	(Yes)	5.0(Yes)-webkit (en-US)	?	?	?
Spread radius	(Yes)	5.0(Yes)-webkit (en-US)	?	?	?

Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a of , you’ll see a scrollbar.

Since version 5.5, Internet Explorer supports Microsoft’s DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get in IE9 or later, you need to set (en-US) to .

Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) removed support for . Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a of , you’ll see a scrollbar.

In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a prefixed version of the property for web compatibility reasons behind the preference , defaulting to . Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to .

CSS тень блока. Свойство box-shadow

Свойство border в css

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

По сути, что такое тень? Это точная копия площади элемента, которая имеет определенный цвет и расположение. Эти параметры можно задавать с помощью свойства box-shadow.

Свойства тени используются в таком порядке:

Перемещение по горизонтали.
Перемещение по вертикали.
Уровень расплывчатости.
Растяжение.
Цвет тени.

Именно в таком порядке нужно указывать параметры тени. Главное, не перепутать значение, так как первые 4 задаются одинаково, с помощью числовых значений — <px>, <em>, <rem> и так далее.

Первый параметр, которое называется <x-offset> — смещает тень по горизонтали относительно блока. Принимает любые значения, включая отрицательные.

Отрицательные значения смещают тень влево, а положительные — вправо. Значение параметра может быть равно 0 при размытии теней по вертикальной оси.

Далее по порядку идет свойство <y-offset>. Отвечает за перемещение тени по вертикали. Тоже принимает любые значения — положительные и отрицательные. Отрицательные значения смещают тень вверх, а положительные — вниз.

Параметру может быть присвоено значение 0. Обычно используется при горизонтальном размытии теней.

Внимание! Советуем указывать значение в пикселях. Можете использовать и другие значения — , , % и другие, но делать это не рекомендуется

Все эти величины довольно большие для создания теней. Указав их можно переборщить с размерами.

3 значение — <blur> или размытие. Данное значение вводить не обязательно, без его указания тени всё равно будут работать.

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

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

Предпоследнее значение, которое отвечает за растяжение тени. Оно также является необязательным, но может повысить красочность вашей тени.

Расширение происходит за счет растяжения центральной сплошной части тени, которая находится между размытыми краями.

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

И последний параметр — <shadow-color>. Его также необязательно указывать, так как по умолчанию тень блока имеет собственный цвет — черный.

Для изменения цвета подойдет любая цветовая система — hex, rgb, rgba, а также стандартные цвета.

Внимание! Если вы хотите чтобы свойство работало в Safari, то этот параметр должен быть указан, даже если вы используете стандартный черный цвет

Соединяя примеры вместе

Осваиваем свойство background color css

Вы можете скачать пример для выпадающей тени и пример для внутренней тени, чтобы иметь больше представления, как эта техника работает. Ниже я привёл полный код для базового метода. Первый листинг кода содержит HTML-код для примера, с базовым блоком и блоком для IE, соединенные вместе:

является родительским по отношению к блоку с контентом. является контентовым блоком, на который мы применим свойство (это также поможет избежать проблем с z-index в IE7). является невидимым блоком с размытием, который используется для создания тени в IE.

Следующий листинг показывает первый блок CSS-кода, который применяется для каждого браузера:

Здесь мы ставим для браузеров, которые его поддерживают, и затес скрываем тень для IE от альтернативных браузеров. Следующий CSS-код используется только для IE — мы применяем его через conditional comments:

Здесь используется для позиционирования контента и его выпадающей тени. Контентом является с классом . Он должен иметь z-index выше, чем тень — с классом . Последний затем позиционируется при помощи абсолютного позиционирования, и тень создается при помощи задания фильтра blur и фонового цвета.

Особенности расчёта значений параметров , , and для блока тени в IE:

значение расчитывается как смещение по оси Х минус степень размытия;
значение расчитывается как смещение по оси Y минус степень размытия;
значение расчитывается как степень размытия минус смещение по оси Х;
значение расчитывается как степень размытия минус смещение по оси Y.

Таком образом в коде, мы используем следующие расчёты, чтобы эмулировать смещение тени в :

Значение расчитывается как смещение по оси Х минус степень размытия; 10 – 5 = 5
Значение расчитывается как смещение по оси Y минус степень размытия; 10 – 5 = 5
Значение расчитывается как степень размытия минус смещение по оси Х; 5 – 10 = –5
Значение расчитывается как степень размытия минус смещение по оси Y. 5 – 10 = –5

После того, как всё сказано и сделано, конечный результат представлен на рисунке 4:

Рисунок 4: Финальный пример, показывающий выпадающую тень в современных браузерах и в текущих версиях IE

Значение свойств

Значение	Описание	Воспроизвести
none	Значение по умолчанию. Тень не отображается	Воспроизвести »
h-offset	Требуется. Горизонтальное смещение тени. Положительное значение помещает тень на правую сторону бокса, отрицательное значение помещает тень на левую сторону бокса	Воспроизвести »
v-offset	Требуется. Вертикальное смещение тени. Положительное значение помещает тень ниже бокса, отрицательное значение помещает тень выше бокса	Воспроизвести »
blur	Необязательный. Радиус размытия. Чем выше число, тем более размытой будет тень	Воспроизвести »
spread	Необязательный. Радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени	Воспроизвести »
color	Необязательный. Цвет тени. Значение по умолчанию цвет текста. Смотреть на CSS Значение цвета для получения полного списка возможных значений цвета.Примечание: В Safari (на ПК)требуется параметр color. Если цвет не указан, тень не отображается вообще.	Воспроизвести »
inset	Необязательный. Изменяет тень с внешней тени (начало) на внутреннюю тень	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитайте о inherit

Совет: Подробнее о допустимых значениях (CSS Единицы длины)

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens

image-rendering
@import
isolation

justify-content

@keyframes

left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position

quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode

z-index

All CSS Text Properties

Property	Description
color	Sets the color of text
direction	Specifies the text direction/writing direction
letter-spacing	Increases or decreases the space between characters in a text
line-height	Sets the line height
text-align	Specifies the horizontal alignment of text
text-align-last	Specifies how to align the last line of a text
text-decoration	Specifies the decoration added to text
text-indent	Specifies the indentation of the first line in a text-block
text-justify	Specifies how justified text should be aligned and spaced
text-overflow	Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow	Specifies the shadow effect added to text
text-transform	Controls the capitalization of text
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align	Sets the vertical alignment of an element
white-space	Specifies how white-space inside an element is handled
word-spacing	Increases or decreases the space between words in a text

❮ Previous
Next ❯

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-modemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index

Integrate CSS With an HTML Page

Now you know how to add cool box-shadow effects using CSS, you can easily integrate them with HTML elements in multiple ways.

You can embed it in the HTML page itself or attach it as a separate document. There are three ways to include CSS in an HTML document:

Internal CSS

Embedded or Internal Style Sheets are inserted within the <head> section of an HTML document using the <style> element. You can create any number of <style> elements in an HTML document, but they must be enclosed between the <head> and </head> tags. Here’s an example demonstrating how to use Internal CSS with an HTML document:

Inline CSS

Inline CSS is used to add unique style rules to an HTML element. It can be used with an HTML element via the style attribute. The style attribute contains CSS properties in the form of «property: value» separated by a semicolon (;).

All the CSS properties must be in one line i.e. there should be no line breaks between the CSS properties. Here’s an example demonstrating how to use inline CSS with an HTML document:

External CSS

External CSS is the most ideal way to apply styles to HTML documents. An external style sheet contains all the style rules in a separate document (.css file), this document is then linked to the HTML document using the <link> tag. This method is the best method for defining and applying styles to the HTML documents as the affected HTML file requires minimal changes in the markup. Here’s an example demonstrating how to use external CSS with an HTML document:

Create a new CSS file with the .css extension. Now add the following CSS code inside that file:

Lastly, create an HTML document and add the following code inside that document:

Note that the CSS file is linked with the HTML document via <link> tag and href attribute.

All the above three methods (Internal CSS, Inline CSS and External CSS) will display the same output-

Demo

Have a look at the demo and compare the two different techniques we’ll be exploring. If the two examples look the same to you, that’s the point. The only difference is how we apply and animate the shadow. On the left we’re animating on , and on the right we’re adding a pseudo-element with , applying the shadow to that, and animating the of that element.

If you bring up your developer tools and hover one of these items, you should see something similar to this (green bars are paints; less is better):

There are clearly more re-paints when hovering the cards on the left side (animating ), compared to hovering the cards on the right side (which animate the of their pseudo-element).

Why are we seeing this effect? There are very few CSS properties that can be animated without constantly triggering repaints for every frame, namely and . We minimize the amount of repaints (and work that your browser has to do) by sticking to only changing these two properties during the animation.

This is the critical difference between the two techniques, stripping out all of the other layout styles:

In the example that performs better we have two layers: one for the box, and one for the shadow, and only animate the property of the shadow layer.

Kaynaklar

http://theburningmonk.com/2010/12/having-fun-with-css3-box-shadow-property/ (box-shadow özelliği)
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://matthamm.com/box-shadow-curl.html
http://www.webdesignshock.com/css3-box-shadow/
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/
http://blog.syndicate-fx.com/code-snippets/css3-boxshadow-effects/
http://www.ballyhooblog.com/realistic-css3-box-shadows/
www.sitepoint.com/pure-css3-paper-curl/
http://www.css3.info/preview/box-shadow/
http://www.wewillbeok.com/likeacastshadow/
http://toolboxdigital.com/2011/03/css3-3d-gradient-box/
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/ (makaleye örnek)
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ Örnekler Sayfası
http://translate.google.com/translate?hl=en&sl=auto&tl=en&u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F1338-css3-box-shadow-ombre.html (box-shadow güzel)
http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow (güzel incele)

Расширенные возможности box-shadows.css

Эффекты при наведении

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

<div class="bShadow bShadow-1h"></div>

Плавная трансформация

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

Подобная трансформация подразумевает обязательное использование класса .bShadow в вашем блоке.

Пример:

<style>
.transform-translateY-5:hover {
    -webkit-transform: translateY(-5px) translateZ(0);
    transform: translateY(-5px) translateZ(0); 
</style>
<div class="bShadow transform-translateY-5 bShadow-1h">bShadow</div>

Создание внутренней тени блока

Чтобы создать внутреннюю тень блока, такую как , вам необходимо добавить скрипт в удобное для вас место на странице html и указать в нем классы, для которых вы хотите применить этот параметр.

Посмотрим на примере класса .bShadow-1.

И не забывайте ставить точку перед классом! В противном случае скрипт не сработает.Не правильно — Правильно —

WordPress Functions.php

Если вы используете CMS, такую как Вордпресс, то вы можете использовать библиотеку просто подключив ее в functions.php вашей темы.

wp_enqueue_style( 'bShadows-style', '//../../box-shadows.min.css', array(), '1.0.1'  );

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

CSS Properties

Синтаксис

Чтобы задать одну тень, можно использовать:

Два, три и четыре значения .
- Если задано только два значения, они интерпретируется как values.
- Если задано третье значение, оно понимается как .
- Если задано четвёртое значение, оно интерпретируется .
Дополнительно, можно задать ключевое слово .
Дополнительно, можно задать значение .

Чтобы задать несколько теней, перечислите их через запятую.

Если ключевое слово не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).
При наличие ключевого слова , тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.

Существуют 2 значения , которые устанавливают смещение тени. определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы можно задать.
Если оба значения равны , то тень расположится за элементом (и будет отображаться размытие, если и/или установлены).

Это третье значение . Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следующее:

Это четвёртое значение . Положительные значения увеличивают тень, отрицательные — сжимают. По умолчанию значение равно (размер тени равен размеру элемента).

Смотрите возможные ключевые слова и нотации для .
Если не указано, используемый цвет будет зависеть от браузера — обычно будет применено значение свойства (en-US), но Safari в настоящее время рисует прозрачную тень в этом случае.

Each shadow in the list (treating as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not , then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one and the other not , the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is , all lengths are , and whose (or not) matches the longer list.

none

где

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sinh()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
Modifiers:
g
i
m
Groups:

(x|y)
Metacharacters:
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
Quantifiers:
+
*
?
{X}
{X,Y}
{X,}
$
^
?=
?!
Properties:
constructor
global
ignoreCase
lastIndex
multiline
source
Methods:
compile()
exec()
test()
toString()

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Тень внутри блока в CSS

Добиться эффекта появления тени внутри блока, можно прописав:

body{font-family: Arial,Verdana,sans-serif;}
h2{text-align: center;margin:5px 0 10px 0;font-weight:bold;}
p{font-size:0.8em;margin-bottom:5px;}
.bsh-wrap{width:300px; border:1px solid #f28cfb; border-radius:5px; margin:25px; overflow:hidden;}
.bsh-shad{position:relative;}
.bsh-shad:after {bottom: -1px; box-shadow: 0 0 8px 0 rgba(167, 97, 166, 0.8); content: ""; height: 1px; left: 1px; position: absolute; right: 1px;}
.bsh-inner{padding:10px;}

Можно добавить тень с одной или нескольких сторон блока:

boxShadow3 { 
width: 80%; 
max-width: 550px; 
margin: 1em auto; 
padding: 1em; 
box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset;}

.boxShadow4 { 
width: 80%; 
max-width: 550px; 
margin: 2em auto; 
padding: 4em; 
background: lightcyan; 
box-shadow: 0 0 4em 4em white inset;}

More Examples

Example

Add a blur effect to the shadow:

#example1 { box-shadow: 10px 10px 8px #888888;
}

Example

Define the spread radius of the shadow:

#example1 { box-shadow: 10px 10px 8px 10px #888888;
}

Example

Define multiple shadows:

#example1 { box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}

Example

Add the inset keyword:

#example1 { box-shadow: 5px 10px inset;}

Example

Images thrown on the table. This example demonstrates how to create «polaroid» pictures and rotate the
pictures:

div.polaroid { width: 284px;
padding: 10px 10px 20px 10px; border: 1px solid
#BFBFBF; background-color: white; box-shadow: 10px 10px 5px #aaaaaa;}