Question

是否可以使用宽度为480像素且高度为360像素的图像并将其应用于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

实际上，你可以使用技巧来做到这一点。使用Google作为border-image

查看我的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;
}

Answer 3

CSS3的答案和嵌套div的答案都是很好的答案，但这取决于你最重视的东西。如果边框图像对您的设计至关重要，那么一个好的经验法则是使用最广泛支持的解决方案。在这种情况下，这将是嵌套的div。但是，如果语义标记和易用性对您来说更重要，请使用CSS3设计边框图像。只是意识到浏览器的支持会减少，因此可以减少观众的影响力。

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

DIV上的图像边框

3 个答案: