本来、要素にシャドウを作るCSSですが、ボーダーのように見せる方法もあります。ぜひウェブデザインに活かしてみてはいかがでしょうか。その前にまずは、
基本：
box-shadow: x軸 y軸 ぼかし 広がり カラー;
例：
box-shadow: 1px 0 5px 1px #999;
基本 ＋ inset(内側向き)
box-shadow: x軸 y軸 ぼかし 広がり カラー inset;
例：
box-shadow: 1px 0 5px 1px #999 inset;
＊「ぼかし」と「広がり」は省略できます。
01. よくあるベーシックタイプ
See the Pen.
なんですが、カンマ「,」で区切ればいくつでも設定できます。
box-shadow: x軸 y軸 カラー, x軸 y軸 カラー, x軸 y軸 カラー, x軸 y軸 カラー;
表示される順序は、
box-shadow: １番上, ２番目, ３番目, 最下層;
そのルールを踏まえて以下のように記述すると、シャドウではなくボーダーのように表現できます。
02. グレーでシンプルなフレームタイプ
03. もちろんカラフルにもできます
See the Pen.
04. こんな風にもできますし
05. drop-shadowの記述の３番目と４番目を背景色に合わせれば、こんな風にもできますね
See the Pen.
06. outlineと[ 05. ]を組み合わせれば、こんなかんじにも
07. またはこう
See the Pen.
単位は[ px ]で設定することで、レスポンシブでもデザインが保持されるかと思われます。
ほんじゃまた.
