仅将边框图像用于底部边框？我们的CSS似乎在整个div复制图像 [英] Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead

问题描述

我们希望仅将图片用于DIV的底部。但是，我们的CSS以某种方式复制了DIV主体的图像，而不是放在底部。

我们做错了什么？

我们只需要支持移动Safari。

示例： http://jsfiddle.net/ZwnF8/

代码：

 < div>< / div> 
 
 div {background：gray; 
 width：100px; 
 height：100px; 
 margin-left：20px; 
 -webkit-border-image：url（http://www.panabee.com/images/dumpling/footer_list.png）0 0 8 0 round 
} 
 设置0宽度（BOTTOM除外）：   / p> 
 
 
  border-image：url（http://example.com/image1.png）; 
 border-top：0; 
 border-left：0; 
 border-right：0; 
  
 
 
 方法2： css，create visual phseudo-element（aka AFTER）：
  .yourDiv :: after {height：20px; width：100％; background：url（http://example.com/image1.png）;} 
  
 
We would like to use an image only for the bottom of a DIV. However, our CSS somehow replicates the image across the body of the DIV instead of placing it at the bottom.

What are we doing wrong?

We only need to support mobile Safari.

Example: http://jsfiddle.net/ZwnF8/

Code:
<div></div>​

div { background:gray; 
      width:100px;
      height:100px;
      margin-left:20px;
      -webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png) 0 0 8 0 round
     }​

解决方案
Method 1: set 0 width (except BOTTOM):  
border-image:url("http://example.com/image1.png");
border-top:0;
border-left:0;
border-right:0;


Method 2: with style.css, create visual phseudo-element (a.k.a "AFTER"):
.yourDiv::after {height:20px; width:100%;   background:url("http://example.com/image1.png");}


                        
这篇关于仅将边框图像用于底部边框？我们的CSS似乎在整个div复制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！