Використовується для відкидання тіней від елементів рівня блоку (наприклад, divs).
.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; )Приклад
Тінь вікна Internet Explorer
Вам потрібні додаткові елементи ...
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; )Пов’язані
- CSS3: розподіліть значення і тінь вікна лише з одного боку
- Mozilla Docs
- Кілька меж з
box-shadow.