CSS: box-shadow サンプル

・影(ドロップシャドー) を付けるサンプル。
  box-shadow は div 以外のタグでも同じように使えるものがあります。

その1

div11
box-shadow: 0 0 4px #aaa;

div12
box-shadow: 5px 1px 4px #aaa;

div13
box-shadow: 1px 5px 4px #aaa;

div21
box-shadow: 3px 3px 4px #ccc;

div22
border: 1px solid #bbb;
box-shadow: 3px 3px 4px #ccc;

div23
border-style: solid;
border-color: #ccc;
border-width: 0px 1px 1px 0px;
box-shadow: 1px 1px 3px #ccc;

角丸 (border-radius) と併用

div31
box-shadow: 2px 2px 6px #ccc;
border-radius: 20px;

div32
border: 2px solid #ccc;
box-shadow: 2px 2px 6px #ccf;
border-radius: 20px;

div41
box-shadow: 0 0 9px #99f;
border-radius: 4px;

div42
box-shadow: 0 0 12px #f90;
border-radius: 6px;

(2009-2024/03)

◎ ノート
・MDN: box-shadow

◎ 昔話
・border-radius, box-shadow は IE8 など古いブラウザは対応しませんでした。
  (2017)現在は気にせず。