The ящик-тінь Властивість CSS додає ефекти тіні навколо рамки елемента. Ви можете встановити кілька ефектів, розділених комами. Коробкова тінь описується зсувами X і Y відносно елемента, радіусом розмиття та поширення, а також кольором.13 серпня 2024 р.
Код для тіні: box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px вставка, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px вставка; Ключове слово inset використовується, щоб вказати, що ми хочемо використовувати тінь усередину, а не поведінку за замовчуванням, тобто назовні.
The :хост() Функція псевдокласу CSS вибирає тіньовий хост тіньової DOM, що містить CSS, у якому вона використовується (так що ви можете вибрати власний елемент зсередини тіньової DOM), але лише якщо селектор, заданий як параметр функції, відповідає тіньовому хосту. :host() не має ефекту, якщо використовується поза тіньовою DOM.
У CSS створюються тіні на коробках елементів використовуючи властивість box-shadow (якщо ви хочете додати тінь до самого тексту, вам знадобиться text-shadow). Властивість box-shadow приймає кілька значень: Зсув на осі x.
Щоб додати тінь до тексту, ви можете використовуйте властивість CSS text-shadow. Властивість text-shadow приймає три значення: перше значення — горизонтальне зміщення тіні. Додатне значення перемістить тінь праворуч, тоді як від’ємне значення перемістить тінь ліворуч.
CSS Box Shadow
- Вкажіть горизонтальну та вертикальну тінь: div { box-shadow: 10px 10px; …
- Вкажіть колір для тіні: div { …
- Додайте ефект розмиття до тіні: div { …
- Встановити радіус поширення тіні: div { …
- Додайте вставлений параметр: div { …
- div { box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;