Свойство CSS text-stroke
Use the text-stroke CSS property to specify the width and the color of the stroke. See property values and practice with examples.
Свойство text-stroke является экспериментальным и предоставляет возможности оформления текста. Это сокращённая запись для следующих свойств:
Существует свойство text-fill-color, которое переопределяет свойство color, обеспечивая плавный переход к другому цвету текста в браузерах, не поддерживающих свойство text-stroke.
Вы можете выбрать цвета здесь: Цвета HTML.
Веб-шрифты обычно основаны на векторной графике, что означает, что форма определяется математикой и точками, а не пиксельными данными. Поскольку они векторные, мы можем делать всё, что можно сделать с векторным текстом в других векторных программах. Например, мы можем добавить обводку для определённых символов.
warning
Свойство text-stroke используется только с вендорным префиксом -webkit-. Это свойство не является стандартным. Оно работает не у всех пользователей. Существуют несовместимости между реализациями, и поведение может измениться в будущем.
| Начальное значение | 0 currentColor |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимация | Да. |
| Версия | Стандарт совместимости |
| Синтаксис DOM | object.style.textStroke = "1px #666"; |
Синтаксис
Значения CSS text-stroke
text-stroke: length | color | initial | inherit;Пример свойства text-stroke:
Пример кода CSS text-stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Результат
Пример свойства text-stroke с несколькими значениями:
Пример нескольких значений CSS text-stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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 property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| length | Указывает толщину обводки. |
| color | Указывает цвет обводки. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Свойство text-stroke является сокращённой записью для следующих свойств: