CSS 仅底部边框图像

Question

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

CSS 仅底部边框图像

CSS border image on bottom only

css

image

border