通過在div內定位放置8個圖像邊框

Question

我試圖將圖像邊框放在<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)

Answer 1

我認為tou需要重新考慮您的方法，並使用背景圖片，而不是定位的div。 這是有關如何執行此操作的文章： http : //www.456bereastreet.com/archive/200406/flexible_box_with_custom_corners_and_borders/

不過，我只會在CSS中使用border-radius： http ： //border-radius.com/

Answer 2

首先是，您完全忘記了</div>標記。 另一件事是，是的，在這里使用ID很好，但是因為top ， bottom ， left和right值幾乎相同，所以對所有人都使用類。 由於角的寬度固定，因此可以考慮使用精靈。

的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/