DIV上的图像边框

Question

是否可以使用宽度为480px和高度为360px的图像并将其作为边框应用于div？我知道它可能实现下面的CSS代码作为边框，但我似乎无法解决如何使用图像。

border:1px solid blue; 

Answer 1

CSS3规范有border-image属性。看看这篇文章：http://css-tricks.com/understanding-border-image/有关如何使用它的信息。

总结：

您应用的边界图像，像这样：

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

提供了一个网址给你的形象，在哪里切片图像和应用的图像元素的行为边境。

Answer 2

其实，你可以用一个技巧来做到这一点。看看我的demo使用Google作为边框图像

基本上，这个想法是有两个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; 
} 

Answer 3

都与CSS3的答案和一个带嵌套的div是很好的答案，但它取决于你的价值最。如果边界图像对您的设计至关重要，一个好的经验法则是使用得到最广泛支持的解决方案。在这种情况下，这将是嵌套的div。但是，如果语义标记和易用性对您更重要，请使用CSS3设计边框图像。只要意识到将有更少的浏览器支持，因此可以体会到这种效果的较小的观众。

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