html - Html中的边框图片

Question

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

我把每个盒子想象成 div，但我不知道如何制作缝合边框。我不想在网站中使用整个图片，因为它会很尴尬。

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

Answer 1

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

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

.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;
}

*单个图像看起来像这样

Answer 2

从显示的边框制作一个无缝的瓷砖，像这样

然后给出如下背景

在这里演示 html

<div class="div"></div>

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;