Question

CSS border-image属性存在问题。我希望我的图像只填充我的html元素的边框底部。我在网上看过这个主题的支持，但没有任何对我有用。我还希望左侧，右侧和顶侧有一个坚固的边框。我不能强制我的边框图像到元素的底部。元素周围的边框应该具有正常的实心边和顶部，边框的底部（不一致）侧面，元素下方。我链接了我的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

您可以使用伪造的内容，而不是边框图像底部，并按照您想要的方式定位。

.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边框图像

1 个答案: