Свойство CSS text-shadow

Свойство CSS text-shadow используется для добавления теней к тексту. Вы можете выбрать цвета здесь: HTML цвета.

Свойство text-shadow является одним из свойств CSS3.

Каждая тень задаётся 2–3 значениями длины и необязательным параметром <color>. Первое значение задаёт горизонтальное смещение (x-offset), второе — вертикальное смещение (y-offset), третье — радиус размытия, а значение цвета задаёт цвет тени.

INFO

Горизонтальное и вертикальное смещение обязательны, третье значение необязательно.

Начальное значение	none
Применяется ко	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Да.
Анимация	Да.
Версия	CSS3
Синтаксис DOM	object.style.textShadow = "1px 3px 3px #8ebf42";

Синтаксис

Синтаксис свойства CSS text-shadow

css

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

Пример использования свойства text-shadow:

Пример свойства CSS text-shadow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .shadow {
        text-shadow: 2px 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Some paragraph for example.</p>
    <p class="shadow">Some paragraph with the text-shadow property.</p>
  </body>
</html>

Try it Yourself »

Результат

CSS text-shadow Property

Пример свойства text-shadow со значениями «x-offset», «y-offset», «blur-radius» и «color»:

Пример свойства CSS text-shadow с указанными x-offset, y-offset, blur-radius и color

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-shadow: 5px 3px 2px #8ebf42;
        font: 1em Roboto, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
h-shadow	Горизонтальное смещение тени. Если положительное, тень рисуется справа от текста, если отрицательное — слева.	Запустить »
v-shadow	Вертикальное смещение тени (по оси Y). Если значение положительное, тень находится под текстом, если отрицательное — над ним.	Запустить »
blur-radius	Радиус размытия определяет размер и степень размытия тени. Отрицательные значения использовать нельзя. Значение по умолчанию — 0.	Запустить »
color	Позволяет выбрать цвет тени. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla().	Запустить »
none	Тень не указана. Это значение по умолчанию для данного свойства.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Какие из следующих утверждений верны для свойства CSS text-shadow?

Свойство CSS text-shadow используется для добавления тени к тексту.Свойство CSS text-shadow может применять только один эффект тени.Свойство CSS text-shadow принимает четыре значения: горизонтальная тень, вертикальная тень, радиус размытия и цвет.Свойство CSS text-shadow нельзя применить к прозрачному тексту.Вы можете применить несколько теней с помощью свойства CSS text-shadow, указав каждую тень через запятую.

Свойство CSS text-shadow ​

Синтаксис ​

Пример использования свойства text-shadow: ​

Результат ​

Пример свойства text-shadow со значениями «x-offset», «y-offset», «blur-radius» и «color»: ​

Значения ​