1. ホーム
  2. text

[解決済み] cssによるテキストボーダー(テキスト周りの枠)

2022-07-16 20:57:06

質問

下の画像のように、テキストの周りにボーダーを組み込む方法はありますか?

どのように解決するのですか?

複数のテキストシャドウを使用する。

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

<イグ

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
<h1>test</h1>

または、webkit でのみ動作するテキストストロークを使用することもできます。

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

<イグ

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}
<h1>test</h1>

また もっと読む をCSS-Tricksと呼びます。