[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
「jquery roundcorners canvas」 と 「jquery curvycorners」 の 設置説明 | 頭脳外部メモリー 「独学で趣味を満喫」
・・・なぜか最近 jquery にはまっているようだ？？ まぁ～それは置いといて、 角丸を作成できる jquery プラグインを付けてみたいと思った・・・・なんとなく。調べた所、2種類発見、それがタイトルの2種類です。 早速、どちらが良いか試してみた所・・・・う～～～ん、一長一短？2種を比較した感想 jquery.curvycorners は、「角丸が綺麗」 「角丸の角度が選べる」 「ボーダーも付けれる」 「ちょっと重い」 「ブラウザによって表示が違う時がある？設定のせいかも・・・」 jquery-roundcorners-canvas は、「角丸がちょっと荒い」 「角の種類がいっぱいある」 「軽い」 と、行った所でしょうか？・・・結局、選んだのは jquery-roundcorners-canvas 理由は、こちらの方が軽かったのとIE ＆ Firefox での表示が同じだったからです・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過背景の角丸ブロックを作成するＣＳＳサンプル:phpspot開発日誌
