画像の周りなどに1pxの破線を引く｜CSS HappyLife
画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。 borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？ その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。 ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。 取り合えず下記を見て下さい。 1番の画像は、背景画像を使っているので枠線はどの環境で見ても同じです。 2番の画像は、borderで見せているので、ブラウザによって表示が違います。 では、やり方。 img.tenten { background:url(../img/dotted.gif); padding:1px; } paddingを1pxとり、背景画像をおいて上げるだけです。 その際に用意する画像がポイント。
Image Rollover Borders That Do Not Change Layout
It’s a fact of CSS life that the ‘border’ of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. (qu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
border プロパティ(枠線(ボーダ)関連プロパティの一括指定) - CSS リファレンス
強調部分に二重線を引きたい！
