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


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; 


}

Додаткові посилання