Користи се за бацање сенки (често названих „Испуштање сенки“, као у Пхотосхопу) из елемената. Ево примера са најдубљом могућом подршком за прегледаче:
.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, сенка ће бити оштра, што је већи број, то ће бити замућенија и што ће се сенка даље ширити. На пример, сенка са хоризонталним помаком од 5 пиксела која такође има радијус замућења од 5 пиксела износиће 10 пиксела од укупне сенке.
- Полупречник ширења (опционално), позитивне вредности повећавају величину сенке, негативне вредности смањују величину. Подразумевано је 0 (сенка је исте величине као замућење).
- Боја (обавезна) - узима било коју вредност боје, на пример хек, намед, ргба или хсла. Ако је вредност боје изостављена, сјене оквира се цртају у боји првог плана (текст
color). Али имајте на уму да старији прегледачи ВебКит (пре Цхроме 20 и Сафари 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; )Пример
Интернет Екплорер (8 и старији) Бок Схадов
Треба вам додатни елемент, али то је могуће 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;Пример показује како то можете користити за стварање више ивица:
Погледајте Пен Мултипле бок хлад у сенци! Цхрис Цоииер (@цхрисцоииер) на ЦодеПен.
Применом сенки на псеудо елементе којима потом манипулишете, можете добити неке прилично отмене 3Д сенке у облику кутије:
Погледајте ефекте оловке сенке оловке ЦСС3 Халила Ибрахима Нуроглуа (@хаибну) на ЦодеПен-у.
Супер глатке сенке помоћу више вредности одвојених зарезом:
Погледајте
глатку кутију-сенку оловке Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.
Подршка прегледача
Погледајте одломак на врху странице за детаље о покривености префикса добављача. Ово је једно од оних својстава код којих је испуштање префикса у овом тренутку прилично разумно.