Question

我想将图像用作边框但只是用于底部 - 这可以在CSS中实现吗？我已经对它进行了简单的研究，并且正在阅读有关切片等的内容，但我并不完全理解它。

我认为可能会出现像border-bottom-image或类似的东西......

由于

Answer 1

也许以另一种方式想到这一点。您希望图像沿元素的底部显示。它可能看起来就像一个边框，但它不必被称为一个。获得您正在寻找的视觉效果的简单方法是在元素上放置一些填充，并将图像作为背景图像放置在该填充区域中。 E.g。

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

Answer 2

首先让你的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代码）

Answer 3

你可以使用这个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

使用CSS的底部边框图像

3 个答案: