HTML CSS 边框图片答案

【问题标题】：HTML CSS border imageHTML CSS 边框图片
【发布时间】：2017-03-11 05:03:22
【问题描述】：

我正在尝试这样做（图片），但我有 6 张图片。 1 条垂直线，水平线 1 和 4 用于每个角。但我不能索赔。有人知道这是怎么做到的吗？

.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 - 结果

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

https://i.stack.imgur.com/J42NQ.png - 右下角

https://i.stack.imgur.com/tAwUA.png - 左上角

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/

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：