Използва се при хвърляне на сенки (често наричани „Пускане на сенки“, като във Photoshop) от елементи. Ето пример с възможно най-дълбоката поддръжка на браузъра:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Това е:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Хоризонталното отместване (задължително) на сянката, положително означава, че сянката ще бъде отдясно на кутията, а отрицателното отместване ще постави сянката вляво на кутията.
- Вертикалното отместване (задължително) на сянката, отрицателното означава, че кутията-сянка ще бъде над полето, положителното означава, че сянката ще бъде под кутията.
- Радиусът на замъгляване (задължителен), ако е зададен на 0, сянката ще бъде остра, колкото по-голямо е числото, толкова по-замъглено ще бъде и колкото по-далеч сянката ще се простира. Например сянка с 5px хоризонтално отместване, която също има радиус на размазване 5px, ще бъде 10px от общата сянка.
- Радиусът на разпространение (по избор), положителните стойности увеличават размера на сянката, отрицателните стойности намаляват размера. По подразбиране е 0 (сянката е със същия размер като размазване).
- Цвят (задължителен) - приема всякаква стойност на цвета, като шестнадесетичен, наименован, rgba или hsla. Ако стойността на цвета е пропусната, сенките на полетата се изчертават в цвета на преден план (текст
color). Но имайте предвид, че по-старите браузъри WebKit (преди Chrome 20 и Safari 6) игнорират правилото, когато цветът е пропуснат.
Използването на полупрозрачен цвят като rgba(0, 0, 0, 0.4)най-често е и приятен ефект, тъй като не покрива напълно / непрозрачно това, което е свършило, а позволява това, което е отдолу, да се покаже през малко, като истинска сянка.
Пример
Вътрешна сянка
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Пример
Internet Explorer (8 и по-надолу) Box Shadow
Имате нужда от допълнителен елемент, но той е изпълним filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Само от едната страна
Използвайки отрицателен радиус на разпространение, можете да изтласкате сянката на кутията и да я избутате само от единия край на кутията.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Множество граници и още
Можете да отделяте кутията-сянка със запетая колкото пъти искате. Например, това показва две сенки с различни позиции и различни цветове на един и същ елемент:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Примерът показва как можете да го използвате, за да създадете множество граници:
Вижте Pen Multiple box-сянка прохлада! от Крис Койер (@chriscoyier) в CodePen.
Чрез прилагане на сенките към псевдо елементи, които след това манипулирате, можете да получите някои доста изискани 3D изглеждащи сенки в кутия:
Вижте Pen CSS3 Box Shadows Effects от Halil İbrahim Nuroğlu (@haibnu) на CodePen.
Супер гладки сенки чрез множество стойности, разделени със запетая:
Вижте
гладка кутия-сянка на Pen от Chris Coyier (@chriscoyier)
на CodePen.
Поддръжка на браузър
Вижте фрагмент в горната част на страницата за подробности относно покритието на префикса на доставчика. Това е едно от тези свойства, при които отпадането на префиксите е доста разумно в този момент.