花粉がつらい今日このごろ。みなさん角丸ボックスコーディングしてますか? ウェブページでのボックスの角丸やシャドウの実装は、様々な手法があるかと思います。 時と場合によって使い分けたい、ボックスとシャドウの実装を比較してみました! 今回再現したい角丸シャドウのカンプ画像はコチラです。 満たしたい条件はこちらです。 角丸とシャドウ、背景画像を再現する 横に拡大縮小しても見苦しい崩れを起こさない 内容のテキストの量によって枠の高さが変化する 四種類(+α)の方法でコーディングしてみました。 サンプルはこちらです。 こちらの表でまとめたように、それぞれ癖があります。詳しく見て行きましょう! CSS3を素直に使う サンプルはコチラ 使いドコロはココだ! スマートフォンサイト とにかく軽くしたい・ソースを美しくしたい時 IE8以下は、角丸なし・シャドウなしで問題がない時 IE8以下は、背景画像がストレ
![角丸影付きボックスを美しく再現するための4種類のソース比較 | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/10b0ec4c1555ee1b8216c26e01085431eef9183e/height=288;version=1;width=512/https%3A%2F%2Fn2p.co.jp%2Fwp-content%2Fuploads%2F2014%2F01%2Fblogredius.jpg)