使用图像的水平边框

Question

我想border-bottom .box用于<div class="box">Hello World</div> 类{/ 3}} {/ 3}}

.box {
    background: #16a085;
    width: 100px;
    color: white;
    padding: 100px;
    text-align: center;
    font-family: "monospace";
    font-weight: bold;
    font-size: 30px;
}

CSS：

/* border stuff */
border-image: url(http://i.imgur.com/CRWpl2d.png);
border-image-repeat: repeat;

结果是：

  

如何在底部将图像设置为水平重复的边框？绿色背景和边界线之间的边距也是必需的。

我试过了：

border-bottom: 3px dotted #367dd2;
padding-bottom: 4px;

不使用图像的替代方案是：

{{1}}

...但我想用图像作为边框。

an image

Answer 1

您可以从底部使用background属性设置边框，如下所示：

background: #16a085 url('http://i.imgur.com/CRWpl2d.png') bottom center repeat-x;

---

但是如果你想在背景和边框之间使用边距，也许这个小提琴对你有用：http://jsfiddle.net/nikoloza/CfT2c/

Answer 2

也许您的供应商前缀可能是问题，并且正如您通常那样指定边框样式。如果这有帮助，请告诉我！

border: 15px solid transparent;
-webkit-border-image: url(http://placehold.it/350x150) 30 30 round; /* Safari */
-o-border-image: url(http://placehold.it/350x150) 30 30 round; /* Opera */
border-image: url(http://placehold.it/350x150) 30 30 round;

Answer 3

您可以在css3 border-image属性

下面

-webkit-border-image:url(imageURL) 30 30 round; /* for Safari browsers*/
-o-border-image:url(imageURL) 30 30 round;  /* for opera browsers*/
border-image:url(imageURL) 30 30 round;

IE 8,9可能不支持border-image属性，你可以通过css3pie实现它。请参阅http://css3pie.com/documentation/supported-css3-features/