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

Последнее обновление: 21.04.2016

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

box-shadow: hoffset voffset blur spread color inset

  • hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном - влево

  • voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном - вверх

  • blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.

  • spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу

  • color: необязательное значение, которое устанавливает цвет тени

  • inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Тени в CSS3</title>
        <style>
		div{
			width: 128px;
			height: 96px;
			margin: 20px;
			border: 1px solid #ccc;
			background-color: #eee;
			box-shadow: 10px 4px 10px 3px #888;
		}
        </style>
    </head>
    <body>
		<div></div>
	</body>
</html>
Свойство box-shadow в CSS 3

Через запятую можно определить несколько различных теней:

box-shadow: 5px 3px 8px 3px #faa, 10px 4px 10px 3px #888 inset;

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850