HTML CSS border image

Question

我想要做到這一點（圖片），但我有6個圖像。 1條垂直線，每個角1和4水平。但我無法宣稱。任何人都有一個想法如何做到這一點？右下方

https://i.stack.imgur.com/tAwUA.png - -

.box { 
    width: 300px; 
    height: 500px; 
    background-color: #000; 
    color: #FFF; 
    border: solid 1px red; 
} 

<div class="box"> 
    text 
</div> 

這裏我的圖像（結果） - https://i.stack.imgur.com/eAw7W.png - 對於每個角

https://i.stack.imgur.com/J42NQ.png結果

和這裏1垂直線，水平1和4左上

https://i.stack.imgur.com/b9O80.png - 右上角

https://i.stack.imgur.com/6EgUc.png - 水平

https://i.stack.imgur.com/DjlME.png - 垂直

https://i.stack.imgur.com/v8w57.png - 水平

https://jsfiddle.net/7rsdvn3e/

Answer 1

你需要做這樣的事情： http://imgur.com/U8fmi9r
然後利用邊界圖像。

border: solid 6px; 
-moz-border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 
-webkit-border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 
-o-border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 
border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 

https://jsfiddle.net/xcanndy/pmcnukex/