仅将边框图像用于底部边框？我们的CSS似乎在整个div中复制了图像

Question

我们想将图像仅用于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
     }?

Answer 1

方法1:设置0宽度(BOTTOM除外):

border-image:url("http://lorempixel.com/g/400/100/?example.jpg");
border-top:0;
border-left:0;
border-right:0;
// btw, you can use "one-line" command>   border-width: 0 0 3px 0;

方法2:使用style.css,创建 0伪元素:

.yourDiv::after { 
    content:"";
    height:20px; 
    width:100%; /* or i.e: 500px */
    background:url("http://lorempixel.com/g/400/100/?example.jpg");
}