Свойство text-shadow

Задает тень для текста

text-shadow: 1px 2px 3px #000;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

text-shadow: none;

Убирает тень у текста

text-shadow: 1px 2px;

Задает тень текста используя два параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y. Цвет тени будет равен цвету текста.  Сдвиг по осям может быть как положительным, так и отрицательным числом. Возможные единицы: px, em, rem, vh, vw

<style>
.example-1 {
    text-shadow: 1px 2px;
}
</style>

<p class="example-1">Текст с тенью</p>

Текст с тенью

text-shadow: 1px 2px #000;

Задает тень текста используя три параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - цвет тени. Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.

<style>
.example-2 {
    color: #fff;
    text-shadow: 1px 2px #000;
}
</style>

<p class="example-2">Текст с тенью</p>

Текст с тенью

text-shadow: 1px 2px 3px #000;

Задает тень текста используя четыре параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - размытие тени, четвертый - цвет тени

<style>
.example-3 {
    color: #fff;
    text-shadow: 1px 2px 3px #000;
}
</style>

<p class="example-3">Текст с тенью</p>

Текст с тенью

text-shadow: 1px 2px 2px #000, 1px 2px 2px red;

Задает множество теней для текста, используя запятую. Возможно задавать сколько угодно теней.

<style>
.example-3 {
    color: #fff;
    text-shadow: 1px 2px 2px #000, 1px 2px 2px red;
}
</style>

<p class="example-3">Текст с тенью</p>

Текст с тенью

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии