0

ビジュアル

のすべての隅に画像の境界線を配置しようとしてい<div>ます。すべての赤いボックスは修正されています。黄色のボックスが繰り返され、私は遊んでいrelativeてabsoluteポジショニングを行ってきました-他の方法はわかりません。必要なすべての要素を意図的に作成しました。ロジックのヘルプが必要です。

これが私のコードですhttp://jsfiddle.net/pedenski/snLGs/

これについて私を助けていただければ幸いです。ありがとう。

SIDE BORDER ----------------------------------------

tb = top border  (http://i50.tinypic.com/2ufua6r.gif)
lb = left border (http://i47.tinypic.com/24wr05d.gif)
rb = rightborder (http://i50.tinypic.com/3307521.gif)
bb = bottom border = (http://i45.tinypic.com/2gvsjfd.gif)

EDGE BORDER --------------------------------------------

tlc = top left corner (http://i45.tinypic.com/fxyvlc.gif)
trc = top right corner (http://i46.tinypic.com/5c10km.jpg)
blc = bottom left corner (http://i47.tinypic.com/jptv7q.gif)
brc = bottom right corner (http://i50.tinypic.com/1shc03.gif)
4

2 に答える 2

0

touはあなたのアプローチを再考し、配置されたdivの代わりに背景画像を使用する必要があると思います。これを行う方法に関する記事は次のとおりです：http ：//www.456bereastreet.com/archive/200406/flexible_box_with_custom_corners_and_borders/

ただし、CSSではborder-radiusを使用します：http：//border-radius.com/

于 2012-10-13T17:18:42.387 に答える
0

</div>まず、終了タグを完全に忘れてしまったということです。もう1つは、はい、ここを使用するのは良いことですが、、、、、および値を除いてIDほぼ同じ文字を使用しているため、すべてにクラスを使用します。コーナーは固定幅なので、スプライトの使用を検討できます。topbottomleftright

CSS

.eb {
    height: 16px;
    width: 20px;
    position: absolute;
}

#tlc {
    background-image: url(http://i45.tinypic.com/fxyvlc.gif);
    top: 0;
    left: 0;
}

#trc {
    background-image: url(http://i46.tinypic.com/5c10km.jpg);
    top: 0;
    right: 0;
}

#blc {
    background-image: url(http://i47.tinypic.com/jptv7q.gif);
    bottom: 0;
    left: 0;
}
#brc {
    background-image: url(http://i50.tinypic.com/1shc03.gif);
    bottom: 0;
    right: 0;
}

.sb {
    position: absolute;
}

#tb {
    background: url("http://i50.tinypic.com/2ufua6r.gif") repeat-x;
    top: 0;
    height: 20px;
    width: 255px;
}
#lb {
    background: url("http://i47.tinypic.com/24wr05d.gif") repeat-y;
    left: 0;
    height: 255px;
    width: 20px;
}
#rb {
    background: url("http://i50.tinypic.com/3307521.gif") repeat-y;
    right: 0;
    height: 255px;
    width: 20px;
}
#bb {
    background: url("http://i45.tinypic.com/2gvsjfd.gif") repeat-x;
    bottom: 0;
    height: 16px;
    width: 255px;
}

フィドル： http： //jsfiddle.net/FK2jw/

于 2012-10-13T17:22:47.620 に答える