Html中的边框图片

Question

下图是我网站的一部分，我需要在每个框中显示一些数据。

我想象每个盒子都是div，但我无法弄清楚如何制作缝合边框。我不想在网站上使用整个图片，因为它会很尴尬。

将此图片转换为HTML的最佳方法是什么？

Answer 1

您可以使用border-image将图像用作CSS3的边框。

这是一个例子，假设您将十字架保存为单个图像*：

.crossBorder {
    border-width: 30px;
    -webkit-border-image:url(cross.png) 30 repeat stretch;
    -moz-border-image:url(cross.png) 30 repeat stretch;
    border-image:url(cross.png) 30 repeat stretch;
    padding: 30px;
}

*单张图片看起来像this

Answer 2

从显示的边框创建一个无缝拼贴，如

然后给出如下背景

demo here HTML

<div class="div"></div＆GT;

CSS

.div {

    background: url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg),
                url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg),
                url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg),
                url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg);
    background-repeat: repeat-y,repeat-y,repeat-x,repeat-x;                 
    background-position: 0,right top,0 0,0 bottom;
    width: 400px; 
    height: 400px;

}

您将获得此

用于阴影效果，

-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;