如何制作不同种类的边框

Question

我想要div这种边框，有办法吗？

我尝试将图像背景放在 div 上，但无法用于响应目的：

.center-social-networks {
    background: url("http://cosmoscreativeagency.com/imagenes/linear_rectangle.png") no-repeat;
    background-size: 300px auto;
    width: 100%;
    height: 200px;
}

<div class="center-social-networks"></div>

Answer 1

试试这个...将背景大小设置为 100% 100%

.center-social-networks {
    background: url("http://cosmoscreativeagency.com/imagenes/linear_rectangle.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 200px;
}

<div class="center-social-networks"></div>

Answer 2

我正在寻找一个属性让我设置自己的边框类型的人，我找到了 border-image，有了这个新的 css3 属性我可以为一张图片，这个属性让我设置自己的边框类型。

示例如下：

.test {
  width: 500px;
  height: 100px;
  border: 3px solid transparent;
  border-image: url(http://cosmoscreativeagency.com/imagenes/square1.png) 5 space;
}

<div class="test">text inside<div>

如何制作不同种类的边框

How to make different kind of borders

html

css

border