概要
CSSプロパティ｢border-image-source｣は、罫線（ボーダー）領域に使用する画像ファイルを指定することができます。またこのプロパティは上下左右４枚の画像は不要で、１枚の画像を分割して実現します。
<div class="border-image-1">ボーダーに画像を挿入しています</div>
<style>
div {
border: 10px solid #def;
}
.border-image-1 {
border-image-slice: 24;
border-image-repeat: repeat;
border-image-source: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
}
</style>またこれらをまとめて指定する場合は border-image プロパティを使用します。
値の指定方法
値は１つから４つ指定することができます。
{ border-image-source: url(画像パス) }値について
指定できる値の種類です。
| 値 | 説明 |
|---|---|
| url | 画像のURLを、url(画像のurl)形式などで指定します |
| none | 画像ファイルを指定しません |
プロパティの種類について
｢border-image-source｣ プロパティは、border-image を細分化したプロパティです。こちらの一覧で全体を確認しておきましょう。
| プロパティ名 | 説明 |
|---|---|
| border-image-source | 画像の参照元を指定する |
| border-image-slice | 画像のボーダー使用範囲を指定する |
| border-image-repeat | 画像ボーダーの繰り返しを指定する |
| border-image-width | 画像ボーダーの太さ（内側に向かう）を指定する |
| border-image-outset | 画像ボーダーイメージエリア（外側に向かう）を指定する |
使用例
指定する画像pathを変更してみます。
<div class="border-image-1">ボーダーに画像を挿入しています</div>
<div class="border-image-2">ボーダーに画像を挿入しています</div>
<style>
div {
border: 10px solid #def;
margin-bottom: 10px;
}
.border-image-1 {
border-image-slice: 24;
border-image-repeat: repeat;
border-image-source: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
}
.border-image-2 {
border-image-slice: 26;
border-image-repeat: repeat;
border-image-source: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample_st.png");
}
</style>