Question

我已将模式附加到border-bottom，因为没有特定的borde-image选择器，我已使用:after附加它。但是，图像不能与其他图像一起缩放。

我是否应该在画布上创建边框图案？我怎么能做到这一点？

提前致谢

.redbrd {
    height: 400px;
    width: auto;
    background: #D20000;
}

.redbrd:after {
    content: url("http://i.imgur.com/iKXPOF0.png");
    position: relative;
    top: 400px;
}

<section class="col-md-12">
                <div class="row">
                    <article class="col-md-6">

                    </article>

                    <article class="col-md-6">
                            <div class="col-md-6 col-xs-6">
                                <div class="redbrd"></div>
                            </div>
                            <div class="col-md-6 col-xs-6">
                                <div class="redbrd"></div>
                            </div>
                    </article>
                </div>
            </section>

Answer 1

您可以为div添加border-image属性。并禁用除底部边框以外的所有边框。例如：

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
border-top:0px;
border-left:0px;
border-right:0px;

}

或试试这个

 div
  {
      border-image-slice: 0 0 27 0; border-image-width: 20px 20px 20px 20px; 
      border-image-      outset: 0px 0px 0px 0px; border-image-repeat: stretch stretch;
     border-image-source: url("https://mdn.mozillademos.org/files/6007/border-image-1.png");
        }

我认为此链接对您有用 https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator

Answer 2

试试这个：

.redbrd:after {
     content: " ";
     position: relative;
     top: 400px;
     display: block;
     background: url("http://i.imgur.com/iKXPOF0.png") repeat-x;
     height: 30px;
}

我该如何将图像附加到边框底部？

2 个答案: