カテゴリー
border-image border-image-repeat CSS3

【CSS3】border-image-repeat:画像ボーダーのリピートを指定する

(例)【CSS3】border-image-repeatの使用方法

See the Pen
border-image-source
by linlin (@linlin098765)
on CodePen.

<p class="sample1"></p>
<p>
<br>ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</p>
p.sample1 {
width:200px; height:50px;
border-image-source:url("https://www.llc-linlin.com/picture/SEO.jpg");
border-image-slice:15px;
border-image-width:10;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:3px;
}

【CSS3】border-image-repeat:画像ボーダーのリピートを指定する

 CSS3のborder-image-repeatは、画像ボーダーのリピートを指定するプロパティです。

  • stretch
    画像を伸縮させ、領域を埋める
  • repeat
    画像をタイル状に繰り返して表示
  • round
    画像をタイル状に均一に並ぶよう繰り返して表示
  • space
    画像をタイル状に並べ、スペースが空れば均等に分配して表示