最近流行のくぼんだ線をCSSで表現border-insetでは表現できない上品なくぼみのある線を最近よく見かけますが、ようやくどういう仕組みになっているのか分かった気がするー。いうことで忘れないうちにメモメモ。(笑)結論から言うとbox-shadowというプロパティを使うんだけど、これについてちょっとおさらい。ボックスに影をつけるbox-shadowもともとはボックスに影を付けるためのプロパティで影の位置やぼかし具合、色などを指定することができる。#ccc;}数値は左から順番に右方向のずれ、下方向のずれ、ぼかし具合を示していて、最後に影の色を設定すれば完成。ちなみにマイナスの値を指定すれば左方向や上方向にずらすことができます。基本的にな設定としてはこんな感じ。#999;}サンプルborderの真下にbox-shadowを指定するくぼんだ線を表現するには横線の場合は真下に、縦線の場合は真横にbox-shadowを指定してあげればOK。このとき、ぼかしはせず、背景の色より明るめの色を指定することでくぼんだ感じの表現になります。#FFFFFF;}例えばヘッダーのメニューのように左右両方の罫線にくぼみを付けたい場合は、カンマで複数指定しする方法が便利です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索このサイトについてCSSやHTML5を勉強しつつ、MacやiPad、iPhoneなどの便利なアプリを紹介したり、雑記なんかを書いたりしていこうと思っています。Twitterもやっているのでよかったらフォローお願いしますー。