Question

我正在尝试这样做（图片），但我有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/

Answer 1

你需要做这样的事情： http://imgur.com/U8fmi9r
然后使用border-image。

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/

HTML CSS边框图片

1 个答案: