(例)【CSS3】border-image-sliceの使用方法
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-slice:画像ボーダーの使用範囲を指定する
CSS3のborder-image-sliceは、画像ボーダーの使用範囲を指定するプロパティです。
border-image-sliceの指定は上・右・下・左の順に4つ指定することが可能であり、省略することもできます。
- 4番目の値を省略・・・2番目の値と同じ
- 3番目の値を省略・・・1番目の値と同じ
- 2番目の値を省略・・・1番目の値と同じ