border-image プロパティ
プロパティ border-image は境界線に画像を設定します。
これは、プロパティ border-image-source、
border-image-slice、
border-image-repeat、
border-image-width、
および border-image-outset の一括指定プロパティです。
この一括指定プロパティは CSS に個別のプロパティよりも先に導入されたため、
より多くの古いブラウザでサポートされています。
構文
セレクター {
border-image: url(画像へのパス) スライス/幅/オフセット 繰り返し;
}
説明
境界線に適用したい画像は特別な形式で作成する必要があります：4 つのコーナー用の小さな画像と
4 つの辺用の画像です。そのような画像の例：
この場合、中央部分は白いままです（要素の背景に表示されたくないため）。中央部分が埋められた画像の例：
値 slice は、画像のどの部分がコーナーに、どの部分が辺に使用されるか（そしてどの部分が中央になるか）をブラウザに指示します。
コーナーには 4 つの部分、辺には 4 つの部分、そして1つの部分（中央部分）は要素の背景になります（オプション、キーワード fill）。
画像は次のようにして断片に「切り分け」られます：値 slice には1つから4つの値を指定します。例で見てみましょう。
次の値が指定されているとします：10 20 30 40（ピクセル px は指定しません。これは画像がラスタとベクタの両方の場合があるためです）。
値は次のことを示します：10 上から切り取り、20 右から切り取り、30 下から切り取り、40 左から切り取ります。
画像のどの部分が左上のコーナーになりますか？それは、上から 10、左から 40 の断片になります。右上のコーナーには、上から 10、右から 20 の部分が入ります。以下同様です。
多くの場合、画像は対称的です（上記の菱形のような）。その場合、すべての辺から等しい断片を切り取る必要があります。
そのような場合は1つの値を指定し、それがすべての辺で同じオフセットを設定します。オレンジ色の菱形を切り取るには、
slice を 26 に指定します（オレンジ色の菱形のサイズが 26px × 26px だからです）。
黄色い菱形は境界線に沿って配置され、次のようになります：ブロック全体に引き伸ばされるか、境界線に沿って繰り返されます（値 repeat によります）：
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: stretch;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
プロパティ border-image は要素の境界線の太さを指定することはできません。
ブラウザは単に既存の幅の境界線に沿って画像を引き伸ばします。したがって、それはプロパティ border を通じて設定する必要があります。
古いブラウザのユーザー（または画像が無効になっているユーザー）は、border で設定された標準の枠線を見るので、
適切なスタイルと色を設定することが理にかなっています。
値
| 値 | 説明 |
|---|---|
| url(画像へのパス) |
画像へのパス。詳細は border-image-source を参照してください。
|
| スライス |
画像のどの部分がコーナーに、どの部分が辺に（そしてどの部分が中央に）なるかをブラウザに指示します。
取り得る値： 1 つから 4 つの数値 | 1 つから 4 つのパーセント値。
数値またはパーセント値に加えて、キーワード fill をスペースで区切って指定することができます。
詳細は border-image-slice を参照してください。
|
| 幅 |
このプロパティは境界線の表示部分の幅を制御し、拡大縮小します。
この値が border-width の幅より大きい場合、境界画像はコンテンツの下にはみ出します。
取り得る値： CSS 単位 | パーセント値 | 数値 | auto。
詳細は border-image-width を参照してください。
|
| オフセット |
境界線を要素の外側に移動させることを可能にする興味深いプロパティです。
負の値はサポートされていません。
取り得る値： CSS 単位（% 以外 (?)） | 正の数値 | auto。
詳細は border-image-outset を参照してください。
|
| 繰り返し |
境界線（コーナー以外）で画像をどのように繰り返すかを指定します：タイル状に敷き詰めるか引き伸ばすか。
取り得る値： stretch | repeat | round | space。
詳細は border-image-repeat を参照してください。
|
デフォルト値：none 100%/1/0 stretch
（url(画像へのパス) スライス/幅/オフセット 繰り返し）。
例 . border-image-repeat: 値 repeat
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
例 . border-image-repeat: 値 stretch
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
例 . border-image-repeat: 値 round
現在、通常の状態では repeat が設定されており、ホバー時には round が設定されています。
ホバー前は境界線に菱形が整数個収まっていませんが、ホバー後は整数個収まっていることに注目してください。これが round の動作です：
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26 round;
}
#elem {
border-style: solid;
border-width: 42px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
例 . border-image-repeat: 2つの単語
幅には repeat、高さには stretch の値：
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
例 . 画像の幅と境界線の幅の一致
マウスホバー時に border-width を増やしますが、border-image の太さは同じままにします。菱形は境界線全体に引き伸ばされます：
<div id="elem"></div>
#elem:hover {
border-width: 52px;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
例 . border-image-slice
断片が等しくない別の画像を使用します：
画像からどの部分を切り取る必要があるかを指定します - 25% 30% 10% 20%。
これは次のように動作します：25% - 上からのオフセット、30% - 右からのオフセット、
10% - 下からのオフセット、20% - 左からのオフセット。本質的に、これらの断片でコーナーを切り取ります。
左上のコーナーは、画像の上から 25%、左から 20% になります。右上のコーナーは、
画像の上から 25%、右から 30% になります。以下同様です。
また、ブロックにマウスをホバーすると、キーワード fill が有効になり、
画像の中央部分がブロックの背景になります：
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
border-style: solid;
border-width: 52px;
border-image: url("image.png") 25% 30% 10% 20% stretch;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
例
線形グラデーションを使用してグラデーション境界線を作成します：
<div id="elem"></div>
#elem {
background: green;
border-image: linear-gradient(to bottom, red, blue) 30;
border-width: 30px;
border-style: solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
例 . border-image-width
要素にマウスをホバーしたときに、border-image-width の値を 2 に設定します
（境界画像は境界線自体の 2 倍の大きさになります）（26/2 - スラッシュの後に指定します。
この場合、26 は border-image-slice の値です）。
境界線自体は拡大されませんが、境界画像は拡大されるため、テキストの下にはみ出ることに注意してください：
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/2 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
例 . border-image-outset
要素にマウスをホバーしたときに、border-image-outset の値を 3 に設定します。
（26/1/2 - 2番目のスラッシュの後に指定します。この場合、26 は border-image-slice の値、
1 は border-image-width の値です）：
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/1/3 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
関連項目
-
プロパティ
border-image-source,
境界線の画像へのパスを設定します -
プロパティ
border-image-slice,
境界線の画像の分割を設定します -
プロパティ
border-image-repeat,
境界線の画像の繰り返しを設定します -
プロパティ
border-image-width,
境界線の画像のサイズを設定します -
プロパティ
border-image-outset,
境界線の画像のオフセットを設定します
