问DIV上的图像边界

EN

CSS3规范具有border-image属性。有关如何使用它的信息，请查看本文：http://css-tricks.com/understanding-border-image/。

总结一下：

您可以像这样应用边框图像：

border-image: url(border-image.png) 25% repeat;

通过提供图像的URL，切片图像的位置以及将图像应用于元素边界的行为。

实际上，你可以使用一个技巧来做这件事。使用Google作为边框图像查看我的demo

基本上，这个想法是有两个div。

<div id="borderDiv"><!-- This will serve as the border -->
    <div id="inner">
    </div>
</div>

CSS

#borderDiv {
    padding: 2px; /* This is the width of the border :P */
    background: url("borderimage.png");
}
#inner {
    background: #fff;
}

使用CSS3的答案和使用嵌套div的答案都是不错的答案，但这取决于您最看重的是什么。如果边框图像对您的设计至关重要，一个好的经验法则是使用支持最广泛的解决方案。在本例中，这将是嵌套的div。但是，如果语义标记和易用性对您更重要，请使用CSS3设计边框图像。只需认识到，浏览器支持将会减少，因此能够欣赏其效果的受众将会减少。

最重要的是，了解你的主要受众和他们使用的浏览器。为他们设计。