2023/11/15

【CSS】文字を縁取る方法！内側と外側に色をつけるtext-stroke/text-shadow

この記事からわかること

CSSで文字(テキスト)の周りを縁取る方法
text-strokeとtext-shadowの使い方

index

[open]

CSSで文字の周りを縁取る方法
text-stroke：文字の内側
text-shadow：文字の外側

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

CSSで文字の周りを縁取る方法

CSSで文字の周りを縁取るにはtext-strokeまたはtext-shadowを使用します。

違い

text-stroke：文字の内側
text-shadow：文字の外側

text-stroke：文字の内側

text-strokeは文字の内側に縁取りをしていくCSSになります。そのためあまり大きな値を与えると文字が潰れてしまうので注意が必要です。

こんにちは

.test {
  font-size: 4.0rem;
  color: #FFF;
  font-weight: bold;
  -webkit-text-stroke: 3px red;
  text-stroke: 3px red;
}

こんにちは

.test2 {
  font-size: 4.0rem;
  color: #FFF;
  font-weight: bold;
  -webkit-text-stroke: 5px red;
  text-stroke: 5px red;
}

text-shadow：文字の外側

text-shadowは文字の外側に影を付与するCSSになります。そのためあまり大きな値を与えると文字が潰れてしまうので注意が必要です。

こんにちは

.test3 {
  font-size: 4.0rem;
  color: #FFF;
  font-weight: bold;
  text-shadow:
      3px 3px 2px red, -3px -3px 2px red,
      -3px 3px 2px red, 3px -3px 2px red,
      3px 0px 2px red, -3px -0px 2px red,
      0px 3px 2px red, 0px -3px 2px red;
}

ぼかしを少なめにするとギザギザになってしまうので注意が必要です。

こんにちは

.test4 {
  font-size: 4.0rem;
  color: #FFF;
  font-weight: bold;
  text-shadow:
      3px 3px 1px red, -3px -3px 1px red,
      -3px 3px 1px red, 3px -3px 1px red,
      3px 0px 1px red, -3px -0px 1px red,
      0px 3px 1px red, 0px -3px 1px red;
}