Создание тени у элемента

Свойство box-shadow позволяет создать у элемента тень. Это свойство может принимать сразу несколько значений:

• box-shadow: hoffset voffset blur spread color inset
• hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном - влево
• voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном - вверх
• blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.
• spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу
• color: необязательное значение, которое устанавливает цвет тени
• inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

Например:

<style>
div{
width: 128px;
height: 96px;
margin: 20px;
border: 1px solid #ccc;
background-color: #eee;
box-shadow: 10px 4px 10px 3px #888;
}
</style>

<div></div>

Контуры элементов

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

Контур в CSS 3 представлен свойством outline, хотя данное свойство является сокращением следующих свойств:

• outline-color: цвет контура
• outline-offset: смещение контура
• outline-style: стиль контура. Оно принимает те же значения, что и border-style:
• none: контур отсутствует
• solid: контур в виде обычной линии
• dashed: штриховая линия
• dotted: линия в виде последовательности точек
• double: контур в виде двух параллельных линий
• outline-width: толщина контура

<style>
div{
width: 128px;
height: 96px;
margin: 20px;
border: 1px solid #ccc;
background-color: #eee;
outline-color: red;
outline-style: dashed;
outline-width: 2px;
}
</style>

<div>Контур в CSS3</div>

С помощью свойства outline данное определение контура можно сократить следующим образом: outline: red dashed 2px;