HTML CSS 테두리 이미지

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 및도 4 상단 왼쪽

https://i.stack.imgur.com/b9O80.png - 오른쪽 위

http://imgur.com/U8fmi9r
다음 국경 이미지를 사용 :

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

당신이 뭔가를 확인해야합니다.

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/