Користи се за бацање сенки са елемената на нивоу блока (попут див-ова).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Хоризонтално померање сенке, позитивно значи да ће сенка бити десно од оквира, негативно померање сенку лево од оквира.
- Вертикални помак сенке, негативан значи да ће оквир-сенка бити изнад оквира, позитиван значи да ће сенка бити испод оквира.
- Радијус замућења (опционално), ако је постављено на 0, сенка ће бити оштра, што је већи број, то ће бити замућенија.
- Полупречник ширења (опционално), позитивне вредности повећавају величину сенке, негативне вредности смањују величину. Подразумевано је 0 (сенка је исте величине као замућење).
- Боја
Пример
Унутрашња сенка
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Пример
Интернет Екплорер Бок Схадов
Потребни су вам додатни елементи ...
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 ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Повезан
- ЦСС3: ширење вредности и сенке оквира само на једну страну
- Мозилла Доцс
- Више граница са
box-shadow.