如何制作不同类型的边框

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

尝试此操作...将background-size设置为100％100％

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我正在寻找一个让我设置自己的边框类型的属性，我找到了border-image，这个新的css3属性我只能指定一个图像的路径，这个属性让我设置了自己的边框类型。 / p>

以下示例：

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