border-insetでは表現できない上品なくぼみのある線を最近よく見かけますが、ようやくどういう仕組みになっているのか分かった気がするー。ということで忘れないうちにメモメモ。（笑）

　結論から言うとbox-shadowというプロパティを使うんだけど、これについてちょっとおさらい。

ボックスに影をつけるbox-shadow
　もともとはボックスに影を付けるためのプロパティで影の位置やぼかし具合、色などを指定することができる。

例

.border {
	box-shadow: 1px 2px 3px #ccc;
}

数値は左から順番に右方向のずれ、下方向のずれ、ぼかし具合を示していて、最後に影の色を設定すれば完成。



ちなみにマイナスの値を指定すれば左方向や上方向にずらすことができます。
基本的にな設定としてはこんな感じ。

例

.border {
	border: 4px solid #F00;
	box-shadow: 4px 4px 4px #999;
}

サンプル

insetで内側に影を付ける

例

.border {
	border: 4px solid #F00;
	box-shadow: inset 4px 4px 4px #999;
}

サンプル

カンマで区切れば複数の指定も可能

例

.border {
	border: 4px solid #F00;
	box-shadow: 4px 4px 4px #999,inset 4px 4px 4px #999;
}

サンプル

borderの真下にbox-shadowを指定する
　くぼんだ線を表現するには横線の場合は真下に、縦線の場合は真横にbox-shadowを指定してあげればOK。このとき、ぼかしはせず、背景の色より明るめの色を指定することでくぼんだ感じの表現になります。

例

.border {
	border-bottom: 1px solid #333333;
	box-shadow: 0px 1px 0px #999;
	color: #FFFFFF;	
}

例えばヘッダーのメニューのように左右両方の罫線にくぼみを付けたい場合は、カンマで複数指定しする方法が便利です。

#access li:last-child {
	border-right: 1px solid #cccccc;
	box-shadow: inset 1px 0px 0 #fff,1px 0px 0 #fff; /*insetで左側を、カンマのあとは右側の罫線をくぼみにしている*/
}

ツイート