-webkit-text-stroke
0 currentcolor
- наследует значение родителя
- наследует значение родителя
Текст
<style>
div {
-webkit-text-stroke: 0; /* свойство text-stroke
наследуется, применяется ко всем элементам, изменяет текст */
/* или */
-webkit-text-stroke-width: 0;
-webkit-text-stroke-color: currentcolor;
}
</style>
<div>Текст</div>
Контур не изменяет ширины буквы, межбуквенного или межсловного расстояния. Одна его половина находится на букве, вторая — вне её. Тень от буквы, при наличии, располагается под контуром, так как начинается от края буквы.
Щ
<style> div { color: green; -webkit-text-stroke: .07em rgba(0,0,0,.5); text-shadow: .07em 0 red; } </style> <div>Щ</div>
Примеры
Контуры букв
<style> @supports (-webkit-text-stroke: 1px blue) { /* если есть поддержка свойства: невидимый текст посетителям не понравится */ p { color: transparent; /* прозрачный цвет букв */ -webkit-text-stroke: 1px blue; } } </style> <p>Текст
Полосатая тыльная сторона
<style> @supports (-webkit-text-stroke: 1px blue) { p { color: transparent; -webkit-text-stroke: 1px blue; text-shadow: -5px -2px blue, -4px -1px #fff; } } @supports (-webkit-background-clip: text) { p { background: repeating-linear-gradient(45deg, blue, blue 1px, white 2px, white 3px); -webkit-background-clip: text; } } </style> <p>Текст
Окантовка
<style> p { position: relative; color: black; -webkit-text-stroke: .04em black; } p::before { /* второй слой */ content: attr(data-text); position: absolute; /* в том же месте той же ширины */ left: 0; right: 0; -webkit-text-stroke: .02em gold; } </style> <p data-text="Текст">Текст
Красивый
<style> i { position: relative; letter-spacing: -0.1em; /* приблизить буквы друг к дружке */ } @supports (-webkit-text-stroke: .03em DeepSkyBlue) { i { color: LightCyan; -webkit-text-stroke: .03em DeepSkyBlue; } i::before { content: attr(data-text); position: absolute; left: 0; right: 0; z-index: -1; -webkit-text-stroke: .1em RoyalBlue; } } </style> <i data-text="К">К</i><i data-text="р">р</i><i data-text="а">а</i><i data-text="с">с</i><i data-text="и">и</i><i data-text="в">в</i><i data-text="ы">ы</i><i data-text="й">й</i>
345-45-45
<style> div { position: relative; padding-left: .2em; } div::before { /* чтобы текст был лучше различим на картинке */ content: attr(data-text); position: absolute; left: 0; right: 0; padding-left: .2em; -webkit-text-stroke: .2em #E09E0C; z-index: -1; } </style> <div data-text="Текст">Текст</div>