Свойство CSS `-webkit-text-stroke-width`
Базовая поддержка Широко доступно
Эта возможность хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с апреля 2017 года.
Свойство -webkit-text-stroke-width CSS задаёт ширину обводки текста.
Синтаксис
/* Keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* Global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: revert; -webkit-text-stroke-width: revert-layer; -webkit-text-stroke-width: unset;
Значения
Это свойство задаётся следующим значением:
-
<line-width> - Ширина обводки.
Формальное определение
| Начальное значение | 0 |
|---|---|
| Применяется к | всем элементам |
| Наследуется | да |
| Вычисленное значение | абсолютная <length>
|
| Тип анимации | дискретный |
Формальный синтаксис
-webkit-text-stroke-width =
<length>
Примеры
Разная ширина обводки
CSS
p {
margin: 0;
font-size: 4em;
-webkit-text-stroke-color: red;
}
#thin {
-webkit-text-stroke-width: thin;
}
#medium {
-webkit-text-stroke-width: 3px;
}
#thick {
-webkit-text-stroke-width: 1.5mm;
}
HTML
<p id="thin">Thin stroke</p> <p id="medium">Medium stroke</p> <p id="thick">Thick stroke</p>
Результаты
Спецификации
| Спецификация |
|---|
| Совместимость # the-webkit-text-stroke-width |
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
-webkit-text-stroke-width |
1 |
15 |
49 |
15 |
3 |
18 |
49 |
15 |
2 |
1.0 |
38 |
2 |
См. также
- Представляем Text-Stroke на webkit.org (2006)
- Статья CSS-Tricks с описанием этой возможности
-webkit-text-stroke-color-webkit-text-stroke-webkit-text-fill-color
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-stroke-width