Question

为什么单个图像出现在所有四个角落？我只想要一个图像显示

有人有任何建议吗？

<html>
    <style>
        div.one{
            border-style: inset;
            border-width:50px;
            border-image-source:url(border1.png);       
        }
    </style>

    <body>
        <div class="one">
        </div>
    </body>
</html>

Answer 1

不，任何浏览器都不支持border-image-source。

改为使用border-image：

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

在你的情况下：

div.one
{
 border-style: inset;
 border-width:50px;
-webkit-border-image:url(border1.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border1.png) 30 30 round; /* Opera */
 border-image:url(border1.png) 30 30 round;
}

检查这个小提琴：http://jsfiddle.net/65adr/55/

Answer 2

border-image-source是一个新的CSS3属性，任何浏览器都不支持。请使用div或其他内容来包含图像。

Answer 3

试试这适用于所有浏览器：

div.one
{
 border-style: inset;
 border-width:50px;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
 border-image:url(border.png) 30 30 round;
}

CSS为div元素边界图像边框

3 个答案: