text-shadow
Оновлено: 06.01.2023
text-shadow
Додає тінь до тексту, а також встановлює її параметри: колір тіні, зміщення щодо напису та радіус розмиття. Властивість text-shadow може працювати спільно з псевдоелементами :first-letter та :first-line.
Коротка інформація
| Значення за замовчуванням | none |
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
text-shadow: none | <тінь> [,<тінь>]*де <тінь>:
<зсув за x> <зсув за y> <радіус розмиття> <колір>
Значення
| none | Скасовує додавання тіні. |
| <колір> | Колір тіні в будь-якому доступному CSS форматі. За замовчуванням колір тіні збігається з кольором тексту. |
| <зсув за x> | Зсув тіні по горизонталі щодо тексту. Позитивне значення цього параметра задає зсув тіні праворуч, негативне - ліворуч. |
| <зсув за y> | Зміщення тіні по вертикалі щодо тексту. Також допустимо використовувати від'ємне значення, яке піднімає тінь вище за текст. |
| <радіус > | Задає радіус розмиття тіні. Що більше це значення, то сильніше тінь згладжується, стає ширшою і світлішою. Якщо цей параметр не задано, за замовчуванням встановлюється рівним 0. Врахуйте, що алгоритм згладжування в браузерах зазвичай різний, тому вигляд тіні може дещо відрізнятися залежно від заданих параметрів згладжування. |
Допускається вказувати кілька параметрів тіні, розділяючи їх між собою комою. У CSS3 враховується такий порядок: перша тінь у списку розміщується вгорі, остання в списку - внизу. У CSS2 порядок навпаки: перша тінь розміщується в самому низу, а остання - вгорі.
Приклад
Об'єктна модель
Об'єкт.style.textShadow
Примітка
Safari до версії 4 підтримує тільки одну тінь, інші ігноруються. З версії 4 працює вже безліч тіней.
Браузер Internet Explorer розуміє властивість text-shadow тільки з версії 10. До цього використовується властивість filter: Shadow(параметри). Наприклад, така конструкція задає колір тіні (#66666666), її напрямок (45° від вертикалі) і величину зсуву (4 пікселі).
filter: Shadow(Color=#666666, Direction=45, Strength=4);