html - Html のボーダー画像

Question

下の図は、各ボックスにいくつかのデータを表示する必要がある私の Web サイトの一部です。

各ボックスを div として想像しましたが、ステッチのような境界線を作成する方法がわかりませんでした。Web サイトで全体像を使用するのは見苦しくなりますので、使用したくありません。

この画像を 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;
}

*単一の画像は次のようになります