Свойство text-stroke - это сокращенная форма записи для следующих свойств:
Есть еще свойство text-fill-color, которое переопределяет свойство color, позволяя изменить цвет текста в браузерах, которые не поддерживают свойство text-stroke.
Можно выбрать цвет отсюда: HTML colors.
Свойство text-stroke используется только с вендорным префиксом -webkit-. Это свойство нестандартное. Оно не может быть использовано каждым пользователем. Есть некоторые несовместимости между применениями, и поведение свойства может в дальнейшем измениться.
Значение по умолчанию | 0 currentColor |
Применяется | Ко всем элементам. |
Наследуется | Да |
Анимируемое | Да |
Версия | - |
DOM синтаксис | object.style.textStroke = "1px #666"; |
Синтаксис
text-stroke: length | color | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
</style>
</head>
<body>
<h2>Пример свойства text-stroke</h2>
<p>Lorem Ipsum - это текст-"рыба"...</p>
</body>
</html>
Рассмотрим другой пример, где использованы несколько значений свойства text-stroke:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.a {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 1px #8ebf42;
.b {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2pt #8ebf42;
.c {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 0.1cm #8ebf42;
</style>
</head>
<body>
<h2>Пример свойства text-stroke</h2>
<p class="a">Lorem Ipsum - это текст-"рыба"...</p>
<p class="b">Lorem Ipsum - это текст-"рыба"...</p>
<p class="c">Lorem Ipsum - это текст-"рыба"...</p>
</body>
</html>
Значения
Значение | Описание |
---|---|
length | Определяет толщину контура. |
color | Определяет цвет контура. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
4.0+ -webkit- | 15.0+ -webkit- | 49.0+ -webkit- |
11.0+ 3.1 - 10.1 -webkit- |
15.0+ -webkit- |
Практикуйте свои знания
Какие параметры можно задать для свойства css 'text-stroke'?
Правильный!
Неправильно!