Question

我们想将图像仅用于DIV的底部。但是，我们的CSS以某种方式将图像复制到DIV的主体上，而不是将其放在底部。

我们做错了什么？

我们只需要支持移动Safari。

代码：

<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宽度设置为全部（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");
}

Answer 2

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

Answer 3

您已将其定义为重复＆＃34; round＆＃34;： http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

以下是如何定义每个属性：

＆＃13;

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;
     }

＆＃13;

Answer 4

我不知道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 mobile不支持这样的东西吗？

Answer 5

这用于将边框图像放在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>

Answer 6

查看此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;
}

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

6 个答案: