ドロップシャドウでテキストやボックスに影を付ける

css

text-shadowとbox-shadow

CSSではテキストやボックスに影を付けることができます。 テキストには「text-shadow」要素を、ボックスには「box-shadow」要素を使って影を付けます。
テキストやボックスに立体感を持たせることができるので、様々な箇所に使われています。

text-shadowの使い方

text-shadow:横幅,横幅,ぼかし幅,色;
.text01{text-shadow:3px 0 0 gray;} /*横のみ*/
.text02{text-shadow:0 3px 0 gray;} /*縦のみ*/
.text03{text-shadow:0 0 3px gray;} /*ぼかしのみ*/
.text04{text-shadow:3px 3px 3px gray;} /*全部*/
css-shadow01

box-shadowの使い方

box-shadow:横,縦,ぼかし,色;
.box01{box-shadow:3px 0 0 gray;}  /*縦のみ*/
.box02{box-shadow:0 3px 0 gray;}  /*横のみ*/
.box03{box-shadow:0 0 3px gray;}  /*ぼかしのみ*/
.box04{box-shadow:3px 3px 3px gray;}  /*全部*/
.box05{  /*全部&通常のボーダー*/
  box-shadow:3px 3px 3px gray;
  border:solid 1px black;
}
css-shadow02

アマルウェブ HOME