只使用CSS底部的边框图像

我想要使用图像作为边框，但只是为了底部 - 这可以在CSS中实现吗？我已经对它进行了简单的研究，并且即时阅读关于切片等内容，但是我不太明白。只使用CSS底部的边框图像

我认为有可能是这样的下边框，图像或类似......

感谢

2013-05-04 user1278496

可能的重复[只使用边框图像的底部边框？我们的CSS似乎跨整个div复制图像，而不是]（http://stackoverflow.com/questions/10164393/use-border-image-only-for-bottom-border-our-css-seems-to-replicate-该图像交流） – jtheman 2013-05-04 22:59:37

检查了这一点http://stackoverflow.com/questions/8337566/why-doesnt-the-border-bottom-image-css-property-work – 2013-05-04 23:02:39

Infact它不能解决我的问题，因为问题上该页面本身从未解决.. – user1278496 2013-05-04 23:11:17

首先让你的HTML是这样的：

<div class="container block"> 
    <div class="content block"> 
     <---!Putt content here!---> 
     <div class="border-bottom block"> 
      <---!Make it empty!---> 
     </div> 
    </div> 
</div>

然后让CSS是这样的：

.block 
{ 
    display:block; 
    position:relative; 
    width: xpx; /*choose your width (x) */ 
} 

border-bottom 
{ 
    background: url('picture url'); 
}

PS：您可以重复这个就像你想并且您将始终具有这些类的样式（只需复制并超过HTML代码）

来源

2013-05-04 23:28:14

以另一种方式或许认为这一点。你想要一个图像沿着元素的底部出现。它可能看起来像一个边框，但它不一定是叫之一。获得所需视觉效果的简单方法是在元素上放置一些填充物，然后将该图像作为背景图像放置在该填充区域中。例如。

element {padding-bottom: 20px; background: url(bgimage.png) no-repeat 50% 100%;}

来源

2013-05-04 23:18:44

您可以使用此CSS属性：

border:solid; 
border-bottom-width:10px; //thickness of border 
border-image:url(image.jpg) 0 0 20 0 repeat; //20 is length of your image

来源

2015-03-21 21:34:59

只使用CSS底部的边框图像

回答

相关问题