Використовується для відкидання тіней (часто їх називають «Відпускання тіней», як у 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-shadow coolness! Кріс Койєр (@chriscoyier) на CodePen.
Застосовуючи тіні до псевдоелементів, якими ви потім маніпулюєте, ви можете отримати кілька вигадливих тіней у вікні 3D:
Дивіться «Pen CSS3 Box Shadows Effects» від Halil İbrahim Nuroğlu (@haibnu) на CodePen.
Надзвичайно плавні тіні за допомогою кількох значень, розділених комами:
Дивіться
гладку коробку-тінь від Chris Coyier (@chriscoyier)
на CodePen.
Підтримка браузера
Детальніше про охоплення префіксів постачальників див. У фрагменті у верхній частині сторінки. Це одна з тих властивостей, коли випадання префіксів є цілком розумним на даний момент.