css властивість text-shadow
CSS властивість text-shadow додає тінь до тексту.
Властивість text-shadow приймає, такі, розділені пропусками, значенні:
- Зміщення тіні.
- Радіус розмиття тіні.
- Колір тіні.
Властивості text-shadow приймає список значень. Кожен елемент у списку може мати два, три або чотири значення.
Перші два значення - значення довжини, які визначають горизонтальне зміщення тіні та вертикальне зсув відповідно (це необхідні значення). Значення третьої довжини може бути визначено радіусом розмиття тіні (необов'язково). І значення кольору можна використовувати для визначення кольору тіні (необов'язково).
Ви можете застосувати кілька тіньових ефектів в рамках одного визначення властивості, розділяючи кожен набір значень комою. Кілька тіньових ефектів застосовуються в зазначеному порядку, і, таким чином, можуть накладатися один на одного, але вони ніколи не накладають сам текст.
Коли дано більше однієї тіні, тіні розташовуються спереду до спини (найперші ближче до користувача, наступні всі далі). Тобто перша задана тінь показується зверху.
Тіні тексту під текстом можуть відображатися, якщо він є частково прозорим. Також, тіні тексту не впливають на макет і не викликають прокручування чи збільшують розмір прокручуваної області.
Ця властивість стосується як псевдоелементів ::first-child, так і ::first-letter.
| Нотатка: | Послідовність задання параметрів заборонено порушувати. |
Синтаксис
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;Властивість text-shadow може отримувати 7 значень:
noneТінь відсутня.
h-shadowОбов'язково. Зміщення тіні по горизонталі. Допускаються від'ємні значення.
v-shadowОбов'язково. Зміщення тіні по вертикалі. Допускаються від'ємні значення.
blur-radiusРадіус розмиття тіні.
colorКолір тіні.
initialВстановлює властивість у значення без задання.
inheritВказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).
| Значення без задання: | none |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.textShadow="2px 5px 5px red" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| text-shadow | 2.0 |
10.0 |
3.5 |
1.1 |
9.5 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| text-shadow | 2.1 |
1.0 |
1.2 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть на рядок тексту для того, щоб побачити тінь.
Приклад використання
Базова тінь для тексту
h1 {
text-shadow: 2px 2px #ff0000;
}