カテゴリー: border-image

カテゴリー
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
    画像をタイル状に並べ、スペースが空れば均等に分配して表示
カテゴリー
border-image border-image-outset CSS3

【CSS3】border-image-outset：画像ボーダーの領域を指定する

（例）【CSS3】border-image-outsetの使用方法

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-outset：画像ボーダーの領域を指定する

　CSS3のborder-image-outsetは、画像ボーダーの領域を指定するプロパティです。
　border-image-outsetの指定は上・右・下・左の順に４つ指定することが可能であり、省略することもできます。

  • 4番目の値を省略・・・2番目の値と同じ
  • 3番目の値を省略・・・1番目の値と同じ
  • 2番目の値を省略・・・1番目の値と同じ

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

【CSS3】border-image-width：画像ボーダーの太さを指定する

（例）【CSS3】border-image-widthの使用方法

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-width：画像ボーダーの太さを指定する

　CSS3のborder-image-widthは、画像ボーダーの太さを指定するプロパティです。
　border-image-widthの指定は上・右・下・左の順に４つ指定することが可能であり、省略することもできます。

  • 4番目の値を省略・・・2番目の値と同じ
  • 3番目の値を省略・・・1番目の値と同じ
  • 2番目の値を省略・・・1番目の値と同じ
カテゴリー
border-image border-image-slice CSS3

【CSS3】border-image-slice：画像ボーダーの使用範囲を指定する

（例）【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番目の値を省略・・・2番目の値と同じ
  • 3番目の値を省略・・・1番目の値と同じ
  • 2番目の値を省略・・・1番目の値と同じ
カテゴリー
border-image border-image-source CSS3

【CSS3】border-image-source：画像ボーダーの画像を指定する

（例）【CSS3】border-image-sourceの使用方法

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-source：画像ボーダーの画像を指定する

　CSS3のborder-image-sourceは、画像ボーダーに指定する画像を指定するプロパティです。
　画像ボーダーは４つの画像ではなく、１つの画像で上下左右のボーダーを作成します。１つの画像ファイルが９つに分割され、その分割された画像がボーダーを構成します。

カテゴリー
border-image CSS3

【CSS3】border-image：画像ボーダーを指定する

（例）【CSS3】border-imageの使用方法

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

<p class="sample1">１</p>
<p class="sample2">２</p>
<p class="sample3">３</p>
<p class="sample4">４</p>
<div>
ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</div>
p{
  width:280px; height:50px;
  border-style:solid; border-width:10px; 
}
p.sample1 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15 round;
}
p.sample2 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15 round stretch;
}
p.sample3 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15;
}
p.sample4 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 30;
}

【CSS3】border-image：画像ボーダーを指定する

　CSS3のborder-imageは画像ボーダーを指定するプロパティです。
　border-imageは、画像ボーダーに関する表示方法をまとめて指定することが可能であり、border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeatの値を半角スペースでそれぞれ区切り指定します。

  • border-image-source
    ボーダーで使用する画像を指定
  • border-image-slice
    内側へスライスする距離を指定（９つのイメージパーツに分割される）
  • border-image-width
    画像ボーダーの太さを指定（border-widthでも可）
  • border-image-outset
    画像の開始位置を指定
  • border-image-repeat
    stretch・round・repeat・spaceのキーワードで画像の繰り返し方法を指定