【css】box-shadowで影をつける方法(内側/外側/パータン)

今回はcssのbox-shadowを使って基本的な影の付け方からいろいろなパターンの影の付け方を紹介していきたいと思います。

box-shadowはよく使うcssでもあるので覚えておくと良いです。

未経験でも安心!人気のオンラインプログラミングスクール

未経験からプログラミングが学べて就職までをサポート!

そもそもbox-shadowとは何?

boxshadowは影を付けることのできるプロパティになります。

また影は外側だけでなく内側にも設定することができます。

box-shadowの基本的な書き方

基本

box-shadow: 左右の向き 上下の向き ぼかしの大きさ 広がりの大きさ 色指定 内側の指定;

box-shadow: 10px 20px 5px 0px #5bc0de;

boxshadowのサンプル

box-shadow( ぼかしあり/外側に影をつける)

box-shadow: 12px 12px 14px #000;

box-shadow(ぼかしない/内側に影をつける)

box-shadow: 14px 14px;

box-shadow(ぼかしあり/内側に影をつける)

box-shadow: 12px 12px 14px inset;

box-shadowで上下左右均等に影をつける

box-shadow: 0 0 8px #000;

box-shadowで透過した影をつける

box-shadow: 4px 4px 4px 6px rgba(0,0,0,0.3);

box-shadowで複数の影をつける

box-shadow: 13px 13px 16px -2px #333, 13px 13px 18px rgba(255,255,255,0.8) inset;

コメント

タイトルとURLをコピーしました