好的，所以这是一个一直困扰我一段时间的问题，我已经看到了一些好的和坏的解决方案。但是什么是最好的解决方案，什么是陷阱，缺点和大“不，不”。
我想要的是创建具有自定义图形边框的动态、灵活的 DIV 块。例如带有阴影的 DIV 框，但不一定是 shadows。
更新： 正如@Jeroen 在评论中所说，我不仅要求“制作阴影的最佳方式”。任何疯狂的自定义图形边框。
我知道有一些 CSS3 ( box-shadow,border-image和border-radius) 的解决方案，但它不是100% 跨浏览器，特别是如果你必须使用一两个版本的旧浏览器。
我想要实现的示例图像：
或者
上面的例子实际上是用我经常使用的一种方法完成的。它完成了这项工作，并且确实满足了所有要求。
- 它适应不同大小的 DIV 块。
- 它使用自定义图形。
- 它适用于跨浏览器和版本。
- 申请起来非常简单快捷。
- 它是免费的 JavaScript，100% CSS/HTML。
...但当然有一些缺点：
- 它需要 8 张图像。
- 它需要 8 个没有实际内容的额外 DIV 块。
- 源代码不是很漂亮。
HTML DIV 块示例：
<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 但我的问题不仅与阴影有关。