HTML CSS 边框图像

Question

我正在尝试执行此操作(图片)，但我有 6 张图片。每个 Angular 有 1 条垂直线、1 条水平线和 4 条水平线。但我不能 claim 。有人知道这是怎么做到的吗？

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

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

这是我的图片(结果)- /image/eAw7W.png - 结果

这里有 1 条垂直线，每个 Angular 有 1 条水平线和 4 条水平线

/image/J42NQ.png - 右下角

/image/tAwUA.png - 左上角

/image/b9O80.png - 右上角

/image/6EgUc.png - 水平

/image/DjlME.png - 垂直

/image/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/