ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2020.01.14  最終更新日:2021.01.04

CSS

【初心者の方向け】cssのbox-shadowのかけかた

いつもいつもbox-shadowの掛け方は、どの数値がどこに反映されるかわからなくなるため、まとめます。

基本的なbox-shadowの書き方

box-shadownは、下記のような書き方、意味になります。

書き方

box-shadow: 10px 10px 10px 10px #ccc;

意味

サンプル

box-shadow: 10px 10px 10px 10px #ccc;

省略した書き方

box-shadowは、以下のように省略して書くことも可能です。それぞれ、以下のような見栄えになります。

書き方01

box-shadow: 10px 10px #ccc;

サンプル01

box-shadow: 10px 10px #ccc;

書き方02

box-shadow: 10px 10px 10px #ccc;

サンプル02

box-shadow: 10px 10px 10px #ccc;

影を内側につける書き方

今まで、あまりお仕事で使う機会はありませんでしたが、内側に影をつける方法もメモ。最後に、insetをつけます。

書き方

box-shadow: 10px 10px 10px 10px #ccc inset;

サンプル

box-shadow: 10px 10px 10px 10px #ccc;

最新記事