css властивість text-shadow

CSS властивість text-shadow додає тінь до тексту.

Властивість text-shadow приймає, такі, розділені пропусками, значенні:

• Зміщення тіні.
• Радіус розмиття тіні.
• Колір тіні.

Властивості text-shadow приймає список значень. Кожен елемент у списку може мати два, три або чотири значення.

Перші два значення - значення довжини, які визначають горизонтальне зміщення тіні та вертикальне зсув відповідно (це необхідні значення). Значення третьої довжини може бути визначено радіусом розмиття тіні (необов'язково). І значення кольору можна використовувати для визначення кольору тіні (необов'язково).

Ви можете застосувати кілька тіньових ефектів в рамках одного визначення властивості, розділяючи кожен набір значень комою. Кілька тіньових ефектів застосовуються в зазначеному порядку, і, таким чином, можуть накладатися один на одного, але вони ніколи не накладають сам текст.

Коли дано більше однієї тіні, тіні розташовуються спереду до спини (найперші ближче до користувача, наступні всі далі). Тобто перша задана тінь показується зверху.

Тіні тексту під текстом можуть відображатися, якщо він є частково прозорим. Також, тіні тексту не впливають на макет і не викликають прокручування чи збільшують розмір прокручуваної області.

Ця властивість стосується як псевдоелементів ::first-child, так і ::first-letter.

правити

Нотатка

Послідовність задання параметрів заборонено порушувати.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Властивість text-shadow може отримувати 7 значень:

none

Тінь відсутня.

автор: Svitlana

правити

h-shadow

Обов'язково. Зміщення тіні по горизонталі. Допускаються від'ємні значення.

автор: Svitlana

правити

v-shadow

Обов'язково. Зміщення тіні по вертикалі. Допускаються від'ємні значення.

автор: Svitlana

правити

blur-radius

Радіус розмиття тіні.

автор: Svitlana

правити

color

Колір тіні.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання.

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
text-shadow	2.0	3.5	1.1	9.5	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
text-shadow	2.1	1.0	1.2

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Заголовок із червоною тінню</h1>

h1 {
    text-shadow: 2px 2px #ff0000;
}