仅底部的 CSS 边框图像答案

【问题标题】：CSS border image on bottom only仅底部的 CSS 边框图像
【发布时间】：2015-10-08 09:11:06
【问题描述】：

我对 CSS 边框图像属性有疑问。我希望我的图像仅填充我的 html 元素的边框底部。我在网上看到了对此主题的支持，但对我没有任何帮助。我还想要左侧、右侧和顶部的实心边框。我不能强制我的边框图像到元素的底部。元素周围的边框应具有正常的实心边和顶部，边框的底部（不一致）边位于元素下方。我已经链接了我的密码笔image-border codepen 谢谢！

<div class="circle_container"><!--BEGIN CIRCLE CONTAINER-->
      <h1 id="pride">PRIDE</h1>
      <h2 id="line2">IN ONE'S WORK</h2>
          <br />

            <ul id="line3">
              <li>IS THE CAT'S MEOW</li>
              <li>IS THE CAT'S STRIPES</li>
              <li>IS THE CAT'S ROAR</li>
              <li>IS THE CAT'S FURBALL</li>
            </ul>
    </div>

【问题讨论】：

标签： css image border

【解决方案1】：

您可以使用伪内容代替边框图像底部，并将其准确定位。

.circle_container:after{
     content:" ";
     display:block;
     width:100%;
     height: 20px;
     background-image:url('/your/image.png');
     position:absolute;
     bottom:-10px;
     left:0px;
}

您还可以添加border-left、border-right 和border-top，只要您认为合适。

【讨论】：