Question

好的，所以这是一个困扰我一段时间的问题，我已经看到了一些好的和坏的解决方案。但是什么是最好的解决方案，什么是陷阱，缺点和大“不，不”。

我想要的是使用自定义图形边框创建动态，灵活的DIV块。对于示例带有阴影的DIV框，但不一定是阴影。

更新： 正如@Jeroen在评论中所说的那样，我不仅要求“制作阴影的最佳方式”。任何疯狂的自定义图形边框。

我知道CSS3有一些解决方案（box-shadow，border-image和border-radius），但它不是 100％跨浏览器，特别是如果你必须使用一个或两个版本的旧浏览器。

我想要实现的示例图片：

Custom graphical border on DIV with CSS example image

或

Custom graphical border on DIV with CSS example image

上面的例子实际上是我经常使用的一种方法。它完成了这项工作，并且确实满足了所有要求。

它适应不同大小的DIV块。
它使用自定义图形。
它适用于跨浏览器和版本。
申请非常简单快捷。
它是免费的，100％CSS / HTML。

......但当然有一些缺点：

需要8张图片。
它需要8个额外的DIV块，没有实际内容。
来源不是很漂亮。

HTML DIV-block示例：

<div class="flowBox">
    <h1>Header 1</h1>

    Vivamus tincidun...

    <div class="border_t"></div>
    <div class="border_b"></div>
    <div class="border_l"></div>
    <div class="border_r"></div>
    <div class="border_br"></div>
    <div class="border_bl"></div>
    <div class="border_tr"></div>
    <div class="border_tl"></div>
</div>

CSS示例：

<style type="text/css">
<!--
.flowBox {
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    position:relative;
}
.border_t {
    background:url(border_t.png) repeat-x;
    position:absolute;
    top:-2px; left:0;
    width:100%;
    height:2px;
}
.border_b {
    background:url(border_b.png) repeat-x;
    position:absolute;
    bottom:-6px; left:0;
    width:100%;
    height:6px;
}
.border_l {
    background:url(border_l.png) repeat-y;
    position:absolute;
    top:0; left:-3px;
    width:3px;
    height:100%;
}
.border_r {
    background:url(border_r.png) repeat-y;
    position:absolute;
    top:0; right:-6px;
    width:6px;
    height:100%;
}
.border_br {
    background:url(border_br.png);
    position:absolute;
    bottom:-6px; right:-6px;
    width:6px;
    height:6px;
}
.border_bl {
    background:url(border_bl.png);
    position:absolute;
    bottom:-6px; left:-3px;
    width:3px;
    height:6px;
}
.border_tr {
    background:url(border_tr.png);
    position:absolute;
    top:-2px; right:-5px;
    width:5px;
    height:2px;
}
.border_tl {
    background:url(border_tl.png);
    position:absolute;
    top:-2px; left:-2px;
    width:2px;
    height:2px;
}
-->
</style>

如您所见，它可能不是最佳解决方案。 但是有更好的方法吗？

更新： 大多数浏览器和版本都支持阴影，即使它不是一个标准。使用css-shadow的来源：http://pastebin.com/LZHUQRW9 但我的问题不仅与阴影有关。

完整源代码： http://pastebin.com/wxFS2PHr