3

我想使用图像作为边框但仅用于底部 - 这可以在 CSS 中实现吗？我已经对其进行了简要研究，并且正在阅读有关切片等的信息，但我不太了解。

我认为可能有类似border-bottom-image或类似的东西......

谢谢

4

3 回答 3

4

或许可以换个方式思考这个问题。您希望图像出现在元素的底部。它可能看起来像一个边界，但它不必被称为一个。获得所需视觉效果的一种简单方法是在元素上放置一些填充并将图像作为背景图像放置在该填充区域中。例如

element {padding-bottom: 20px; background: url(bgimage.png) no-repeat 50% 100%;}
于 2013-05-04T23:18:44.313 回答
2

你可以使用这个 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-21T21:34:59.743 回答
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 代码）

于 2013-05-04T23:28:14.423 回答