html - 使用 div 内的定位放置 8 个图像边框

Question

我正在尝试将图像边框 放在<div> 的所有 Angular 落.所有红色框都是固定的； 黄色框会重复，我一直在玩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

首先，你完全忘记了结尾 </div>标签。另一件事是，是的，使用 ID这很好，但是对所有的人都使用类，因为你有几乎相同的字符，除了top , bottom , left , 和 right值。由于 Angular 的宽度是固定的，所以可以考虑使用 Sprite 。

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;
}

fiddle :http://jsfiddle.net/FK2jw/