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：::AFTER style.cssを使用して、 phseudo-elementを作成します 。

.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

-webkit-border-bottom-imageを試してください。Webkit以外のブラウザを含めることを忘れないでください。ここに便利なリンクがあります：http：//css-tricks.com/understanding-border-image/

于 2012-04-15T17:41:41.863 に答える
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 に答える
1

私はサファリモバイルについて知りませんが、フィドルであなたのcssの境界部分を殺し、これをあなたのdivの下に置きました：

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

そして、それはあなたが望むように見えることをしました。サファリモバイルはこのようなものをサポートしていませんか？

于 2013-11-01T05:35:18.713 に答える
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 に答える
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 に答える