使用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和{之外，因为你有几乎相同的字符，所以使用所有类的类{1}}值。由于角是固定宽度，您可以考虑使用精灵。

CSS

right

小提琴：http://jsfiddle.net/FK2jw/