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

Question

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

我想要的是创建具有自定义图形边框的动态、灵活的 DIV block 。例如，示例 带有阴影的 DIV 框，但不一定是阴影。

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

我知道有一些 CSS3 的解决方案(box-shadow、border-image 和 border-radius)，但不是100% 跨浏览器，尤其是当您必须使用一个或两个版本的旧浏览器时。

我想要实现的示例图像:

或

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

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

...当然也有一些缺点:

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

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://css3pie.com

这将允许您在较旧的浏览器中使用 CSS 3 元素，并且应该有助于保持您的标记更清晰。

您还可以包含一些额外的逻辑，这些逻辑将为支持它的浏览器使用 CSS 3，并为其他浏览器恢复为 CSS Pie 功能。