p ( text-shadow: 1px 1px 1px #000; )Ви можете застосувати декілька тіней для тексту, розділяючи їх комами
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Перші два значення визначають довжину зміщення тіні. Перше значення задає горизонтальну відстань, а друге - вертикальну відстань тіні. Третє значення вказує радіус розмиття, а останнє - колір тіні:
1. значення = X-координата
2. значення = Y-координата
3. значення = радіус розмиття
4. значення = колір тіні
Використання додатних чисел як перших двох значень закінчується розміщенням тіні праворуч від тексту горизонтально (перше значення) та розміщенням тіні під текстом вертикально (друге значення).
Третє значення, радіус розмиття, є необов’язковим значенням, яке можна вказати, але не обов’язково. Це кількість пікселів, на який розтягується текст, викликає ефект розмиття. Якщо ви не використовуєте третє значення, це трактується так, ніби ви вказали нульовий радіус розмиття.
Також пам’ятайте, що для кольору можна використовувати значення RGBa або HSLa, наприклад, 40% прозорість білого:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Приклади
Див. Приклади складних текстових тіней пера, написані Крісом Койєром (@chriscoyier) на CodePen.
Більше інформації
- Документи MDN
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | будь-який | будь-який |