僅限底部的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您認爲合適的。