CSS Стили
  • !important
  • ::-ms-browse
  • ::-ms-check
  • ::-ms-clear
  • ::-ms-expand
  • ::-ms-fill
  • ::-ms-reveal
  • ::-ms-value
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::placeholder
  • ::selection
  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :root
  • :target
  • :valid
  • :visited
  • @charset
  • @font-face
  • @document
  • @import
  • @keyframes
  • @media
  • @page
  • @viewport
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • 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-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • border-top-right-radius
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • 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
    • Alpha
    • BasicImage
    • Blur
    • Chroma
    • DropShadow
    • Emboss
    • Engrave
    • Glow
    • Gradient
    • ICMFilter
    • Light
    • MaskFilter
    • Matrix
    • MotionBlur
    • Shadow
    • Wave
  • flex-basis
  • flex-direction
  • float
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • hyphens
  • image-rendering
  • 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
  • marks
  • max-height
  • max-width
  • min-height
  • min-width
  • object-fit
  • opacity
  • orient
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • 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
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-indent
  • 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

CSS стиль box-shadow. Тень у элемента с помощью box-shadow

CSS стиль box-shadow добавляет тень к элементу. Возможно использовать несколько теней, указывая их параметры через запятую, при этом каждая последующая тень будет ниже предыдущей.
Internet Explorer Chrome Opera Safari Firefox
9 1 10 10.5 3 5.1 3.5 4
Android Firefox Mobile Opera Mobile Safari Mobile
1 4 3.5 4 11 3 5.1

Краткая информация по CSS-свойству box-shadow

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам

Правила написания CSS-стиля box-shadow

box-shadow: none | <тень> [,<тень>]

где <тень> - выражение вида:

inset <x> <y> <размытие> <растяжение> <цвет>

none - Отменяет добавление тени.

inset - Тень выводится внутри элемента. Необязательный параметр.

x - Смещение тени по горизонтали относительно элемента. Положительная величина задает сдвиг тени вправо, отрицательная — влево. Обязательный параметр.

y - Смещение тени по вертикали относительно элемента. Положительная величина задает сдвиг тени вниз, отрицательная — вверх. Обязательный параметр.

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

растяжение - Положительная величина растягивает тень, отрицательная - сжимает. Если этот параметр не задан, то тень будет того же размера, что и элемент.

цвет - Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

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

Пример применения стиля box-shadow

Проиллюстрируем работу box-shadow на примере выпадающего окна. Наша задача сделать объемный попап. Вот как это можно сделать:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тени с помощью box-shadow</title>
  <style>
   .shadow {
    background: #fc0; /* Цвет фона */
    box-shadow: 0 0 10px #00bff3; /* Параметры тени */
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="shadow">Все условия выполнены!</div> 
 </body>
</html>
Применение псевдоэлемента box-shadow
Применение тени box-shadow
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru