16

我们只想将图像用于 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
     }​
4

6 回答 6

21

方法1：将0宽度设置为全部（除border-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，创建 ::AFTER伪元素：

.yourDiv::after { 
    content:"";
    height:20px; 
    width:100%; /* or i.e: 500px */
    background:url("http://lorempixel.com/g/400/100/?example.jpg");
}
于 2015-05-20T08:46:03.900 回答
4

您已将其定义为“圆形”重复： http ://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

以下是定义每个单独属性的方法：

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

于 2015-04-20T20:51:13.200 回答
4

尝试使用 -webkit-border-bottom-image 。不要忘记包括非 webkit 浏览器。这是一个有用的链接：http ://css-tricks.com/understanding-border-image/

于 2012-04-15T17:41:41.863 回答
1

我不知道 safari mobile 但我在小提琴上杀死了你的 css 的边界部分并将它放在你的 div 下方：

<div></div><img src="http://www.panabee.com/images/dumpling/footer_list.png" style="height:20px;width:100px;margin-left:20px;"/>

它做了你想要的。Safari手机不支持这样的东西吗？

于 2013-11-01T05:35:18.713 回答
1

看看这个jsfiddle.net/ocewa9sm/

#borderimg {
 background: #dfdfdf;
 padding: 15px;
 position: relative;}

#borderimg:after {  
 content: "";
 border-bottom: 16px solid transparent;
 width: 100%;
 position: absolute;
 left: 0;
 bottom: -16px;

 -webkit-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
 -o-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png);
 border-image: url(http://www.panabee.com/images/dumpling/footer_list.png) ;

 border-image-slice: 8;
 border-image-width: 8px;
 border-image-outset: 0;
 border-image-repeat: stretch;
}
于 2017-02-20T11:42:29.003 回答
1

这用于将边框图像放在 div 的底部

     <html>
        <head>
           <style>
           .target{
        height:100px;
        width:100px;
        border-image: url(Images/line.png) 0 0 5 0;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom:8px;
        } 
       </style>
       </head>
       <body>
         <div class="target">

         </div>
         </body>
        </html>
于 2015-11-12T08:12:42.570 回答