【テキスト縁取り】テキストの周りに枠線をつける方法【簡単キレイ】

結論から言うとつぎのようにやります
解説
改善案

結論から言うとつぎのようにやります

HTML

<h1 class="strokeBlack" style="--word:'テキストデコレーション！';">
テキストデコレーション！
</h1>

<h2 class="strokeRed" style="--word:'長い文章でも対応できるか？';">
長い文章でも対応できるか？
</h2>

<p class="strokeBlue" style="--word:'ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト';">
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</p>

CSS

.strokeRed{
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: red;
}
.strokeBlack{
-webkit-text-stroke-width: 8px;
-webkit-text-stroke-color: black;
}
.strokeBlue{
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: blue;
}

[style^=--word]{
position:relative;
}

[style^=--word]::before{
content:var(--word);
position:absolute;
top:0;
left:0;
z-index:1;
-webkit-text-stroke-width: 0;
color:#fff;
}

こうすると次のようになります。