Использовать изображение границы только для нижней границы? Наш CSS, похоже, копирует изображение по всему div вместо

Мы хотели бы использовать изображение только для нижней части 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
     }

Ответ 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");
}

Ответ 2

Попробуйте использовать -webkit-border-bottom-image. Не забудьте включить браузер, не являющийся веб-сайтом. Вот полезная ссылка: http://css-tricks.com/understanding-border-image/

Ответ 3

Вы определили его как "круглый": 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;
     }

Ответ 4

Я не знаю о сафари-мобиле, но я убил пограничную часть вашего css на скрипке и поместил это ниже вашего div:

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

И он сделал то, что вам кажется. Не поддерживает ли сафари-мобиль что-то вроде этого?

Ответ 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>

Ответ 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;
}