使用CSS在DIV上自定义图形边框

Question

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

我想要的是创建具有自定义图形边框的动态,灵活的DIV块.对于例如一个DIV开箱即用的阴影,但不一定阴影.

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

我知道有与CSS3一些解决方案(box-shadow,border-image和border-radius),但它不是100%跨浏览器,特别是没有,如果你有一个或两个版本的旧浏览器.

我想要实现的示例图像:

要么

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

• 它适应不同大小的DIV块.
• 它使用自定义图形.
• 它适用于跨浏览器和版本.
• 申请非常简单快捷.
• 它是免费的JavaScript,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

Answer 1

你可以尝试这样的事情：http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

我认为还有更多的库 - JavaScript、.htc 之类的东西，等等...... - 可以实现相同的目标。

编辑：我想你不会回避使用 8 张不同的图片。但是您可以编写一个 JavaScript 来动态添加所需的 DIV，例如为每个带有类边框的 DIV。

这会清理你的 HTML 标记 - 但 DOM 仍然很复杂。