border - CSSを使用した下だけのボーダー画像

Question

画像を境界線として使用したいのですが、下だけに使用したいのですが、これは CSS で実現できますか? 私はそれを簡単に調査し、スライスなどについて読んでいますが、よくわかりません。

私は、border-bottom-image のようなものがあるかもしれないと思っていました...

ありがとう

Answer 1

まず、HTML を次のようにします。

<div class="container block">
   <div class="content block">
      <---!Putt content here!--->
       <div class="border-bottom block">
           <---!Make it empty!--->
       </div>
   </div>
</div>

次に、css を次のようにします。

.block
{
  display:block;
  position:relative;
  width: xpx; /*choose your width (x) */
}

border-bottom
{
  background: url('picture url');
}

ps:これを好きなだけ繰り返すことができ、それらのクラスのスタイルが常に得られます (HTML コードをコピーして貼り付けるだけです)。

Answer 2

このcssプロパティを使用できます：

border:solid;
border-bottom-width:10px; //thickness of border
border-image:url(image.jpg) 0 0 20 0 repeat; //20 is length of your image