[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、
![[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d32ad08c42abf3adf6023a2cf5a9740723afbdb/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-design-sample-02-150x150.png)
