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>

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;