1

http://bootply.com/89567

我在 上附加了一个模式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>
4

2 回答 2

0

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

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 。

于 2013-10-23T12:32:11.290 回答
0

尝试这个：

.redbrd:after {
     content: " ";
     position: relative;
     top: 400px;
     display: block;
     background: url("http://i.imgur.com/iKXPOF0.png") repeat-x;
     height: 30px;
}
于 2013-10-23T12:32:14.413 回答