まずはこちらのCSSを使用した縁取りの例をいくつか紹介します。
こんな感じになります。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
色を変えることも可能です。
ロールオーバーも可能。
CSSはこんな感じです。
.fuchi-text {
--fuchi-width: 2px;
--fuchi-color: #000;
color: #fff;
text-shadow:
calc(cos(2 * pi / 32 * 0) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 0) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 0) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 0) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 0) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 0) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 1) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 1) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 1) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 1) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 1) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 1) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 2) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 2) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 2) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 2) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 2) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 2) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 3) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 3) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 3) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 3) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 3) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 3) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 4) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 4) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 4) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 4) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 4) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 4) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 5) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 5) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 5) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 5) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 5) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 5) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 6) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 6) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 6) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 6) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 6) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 6) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 7) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 7) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 7) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 7) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 7) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 7) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 8) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 8) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 8) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 8) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 8) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 8) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 9) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 9) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 9) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 9) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 9) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 9) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 10) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 10) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 10) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 10) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 10) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 10) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 11) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 11) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 11) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 11) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 11) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 11) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 12) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 12) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 12) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 12) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 12) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 12) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 13) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 13) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 13) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 13) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 13) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 13) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 14) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 14) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 14) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 14) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 14) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 14) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 15) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 15) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 15) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 15) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 15) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 15) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 16) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 16) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 16) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 16) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 16) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 16) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 17) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 17) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 17) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 17) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 17) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 17) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 18) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 18) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 18) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 18) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 18) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 18) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 19) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 19) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 19) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 19) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 19) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 19) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 20) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 20) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 20) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 20) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 20) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 20) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 21) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 21) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 21) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 21) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 21) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 21) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 22) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 22) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 22) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 22) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 22) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 22) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 23) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 23) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 23) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 23) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 23) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 23) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 24) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 24) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 24) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 24) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 24) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 24) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 25) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 25) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 25) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 25) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 25) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 25) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 26) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 26) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 26) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 26) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 26) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 26) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 27) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 27) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 27) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 27) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 27) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 27) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 28) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 28) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 28) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 28) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 28) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 28) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 29) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 29) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 29) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 29) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 29) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 29) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 30) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 30) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 30) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 30) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 30) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 30) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 31) * var(--fuchi-width)) calc(sin(2 * pi / 32 * 31) * var(--fuchi-width)) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 31) * var(--fuchi-width) * 1 / 3) calc(sin(2 * pi / 32 * 31) * var(--fuchi-width) * 1 / 3) 0 var(--fuchi-color),
calc(cos(2 * pi / 32 * 31) * var(--fuchi-width) * 2 / 3) calc(sin(2 * pi / 32 * 31) * var(--fuchi-width) * 2 / 3) 0 var(--fuchi-color);
}HTMLはこれだけでOK。こうすると・・・。
<span class="fuchi-text">サンプルテキスト</span>こうなります。↓
サンプルテキスト
縁の色や幅も変更可能です。例えばこうすると・・・。
<span class="fuchi-text" style="--fuchi-color:#f00;--fuchi-width:4px;">サンプルテキスト</span>こうなります。↓
サンプルテキスト
簡単に何をやっているのか説明すると、text-shadowをぐるりと1周させているだけです。そして縁が太い場合にスカスカになることがあるので、念の為半径を3段階に分けてぐるりとさせています。
ある程度の太さの縁には対応できると思いますが、極端に太い縁や大きい文字の場合はちょっとおかしな表示になるかもしれません。
縁がおかしくなった例
ほどほどでご利用ください。