Свойство text-shadow задает тень тексту.
В качестве значения свойство принимает 4
параметра, перечисляемые через пробел, либо
ключевое слово none, отменяющее тень
совсем (это значение по умолчанию).
Синтаксис
селектор {
text-shadow: сдвиг_по_x сдвиг_по_y размытие цвет;
}
селектор {
text-shadow: none;
}
Параметры
| Параметр | Описание |
|---|---|
| сдвиг по x |
Задает смещение тени по оси X.
Положительное значение смещает вправо, отрицательное - влево. |
| сдвиг по y |
Задает смещение тени по оси Y.
Положительное значение смещает вниз, отрицательное - вверх. |
| размытие |
Задает размытие тени.
Чем больше значение - тем более размытой будет тень. Необязательный параметр. Если не задан - тень будет четкой. |
| цвет |
Задает цвет тени в любых единицах для цвета.
Необязательный параметр. Если не задан - цвет тени совпадает с цветом текста. |
Смещения по осям и размытие задаются в любых единицах для размеров, кроме процентов.
Пример
Давайте сдвинем тень вниз и влево и добавим небольшое размытие:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 5px 5px 3px black;
}
:
Пример . Четкая тень
А теперь сделаем тень красного цвета, сдвинем ее вниз и влево, но уберем размытие - тень будет четкой:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 10px 10px red;
}
:
Пример . Равномерная тень
Сейчас тень не сдвинута, но к ней добавлено размытие:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 0px 0px 3px black;
}
:
Смотрите также
-
свойство
box-shadow,
которое задает тень контейнеру