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

*单个图像看起来像这样