iPhoneでちゃんと表示される1px角丸枠線 //CSS

iPhoneやiPodTouchでPC用に作られたサイトを見た場合、1pxの幅や高さの画像は、縮小されてみた場合に表示されなくなってしまうことがあります。
1pxの幅や高さの画像は、borderの代わりに使い、角丸の枠線を作りたいときなどにも使っています。
そこで、今回はこれを回避するために、iPhoneなどで縮小したときにも表示される角丸の枠線のついたエリアを作ってみました。
IEではCSSのborderで角丸にできないので、画像で対応しています。下のCSSは、IE,Safari(&iPhone),FireFoxを想定しています。
実際には、文字の拡大縮小に対応するために、IEなど、画像にする場合は、バックグラウンドに敷く画像を上部、中央(リピートさせる)、下部に分割させて使います。

div{
width:300px;
height:100px ;
border:1px #000000 solid;
-webkit-border-radius:10px;/*Safari(iPhone含む)*/
-moz-border-radius: 10px;/*FireFox*/
/*この下IE用にborderを削除し、画像で対応*/
*border:none;
*background:url(bg.gif);
}


Bookmark and Share


ブックマークに追加