[解決済み] 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と呼びます。
関連
-
[解決済み] XQuery データと text() 関数
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] Sublime Text 2にはアセンブリのシンタックスハイライトがありますか?
-
[解決済み] Linuxで特定のテキストを含むすべてのファイルを検索するにはどうすればよいですか?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み】コサインの類似性の例を、とても簡単な図式で誰か教えてください。[クローズド]
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
-
[解決済み] Text Editor which shows \rn? [クローズド]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン