仅底部的 CSS 边框图像

Question

我对 CSS border-image 属性有疑问。我希望我的图像只填充我的 html 元素的 border-bottom。我在网上看到了对该主题的支持，但对我没有任何帮助。我还想要左侧、右侧和顶部的实线边框。我不能将我的边框图像强制到元素的底部。元素周围的边框应该有正常的、实心的边和顶部与边框的底部(不一致)边，在元素下方。我已经链接了我的codepen 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>

Answer 1

除了使用 border-image bottom，你可以使用伪内容，并按照你想要的方式定位它。

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