2017/03/22 【最終更新日：2017/07/11】 bootstrap HTML5 ブログカスタマイズ

CSSのtext-shadowと使って文字を縁取りをする

text-shadowの使い方

まずは、テキスト（文字）に対して影をつけるためにtext-shadowの使い方。

ソースサンプルＨＴＭＬ部分
1 2 3 4 5 6 7	`<html>` `<body>` `<p>サンプル</p>` `</body>` `</html>`

ソースサンプル CSS部分
1 2 3 4 5 6 7	`p {` `color: #ff0000; /①部分/` `text-shadow: 10px 10px 5px #4169e1; /②部分/` `/* test-shadow: 横方向のズレ下方向のズレぼかし具合影の色; */` `}`

テキスト（文字）に対して、４つの影を用意し縁取る（囲む）ようにして設置する

ソースサンプルＨＴＭＬ部分
1 2 3 4 5 6 7	`<html>` `<body>` `<p>サンプル</p>` `</body>` `</html>`

ソースサンプル CSS部分
1 2 3 4 5 6 7 8 9 10 11	`p {` `color: #ff0000; /①部分/` `text-shadow:` `2px 2px 3px #4169e1; /②部分/` `2px -2px 3px #4169e1; /③部分/` `-2px -2px 3px #4169e1; /④部分/` `-2px 2px 3px #4169e1; /⑤部分/` `/* test-shadow: 横方向のズレ下方向のズレぼかし具合影の色; */` `}`