CSS为div元素边界图像边框

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 个解决方案

解决方案1
2 2013-12-02 11:17:30

解决方案2
0 2013-12-02 11:17:21

解决方案3
0 2013-12-02 11:20:43

CSS为div元素边界图像边框

问题描述

3 个解决方案

解决方案1 2 2013-12-02 11:17:30

解决方案2 0 2013-12-02 11:17:21

解决方案3 0 2013-12-02 11:20:43

解决方案1
2 2013-12-02 11:17:30

解决方案2
0 2013-12-02 11:17:21

解决方案3
0 2013-12-02 11:20:43