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

我认为你需要重新考虑你的方法，并使用背景图像，而不是定位的 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>标签。另一件事是，是的，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/

于 2012-10-13T17:22:47.620 回答