仅限底部的CSS边框图像

Question

我遇到了CSS边框图像属性的问题。我希望我的图像只填充我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您认为合适的。