要素の境界線については、前に紹介したデフォルト スタイルのいくつかを使用することに加えて、CSS3 の border-image プロパティを通じて要素の境界線として画像を使用して、カラフルな境界線効果を作成することもできます。
border-image 属性は、いくつかの簡単なルールに従って画像を 9 つの個別の部分に分割でき、ブラウザは対応する部分を自動的に使用して、境界線のデフォルト スタイルを置き換えます。 border-image 属性は、5 つの border-image-* 属性の省略形であり、その構文形式は次のとおりです。
border-image：border-image-source||border-image-slice[/border-image-width|/border-image-width?/border-image-outset]?||border-image-repeat
次に、以下に示す図を使用して、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat の使用方法を示します。
1. ボーダー画像ソース
border-image-source 属性は、境界線に使用する画像を定義するために使用されます。この属性により、border-image-source 属性の値が の場合に、境界線のデフォルトのスタイルを置き換える画像を指定できます。なし、または指定された画像が使用できない場合は、境界線のデフォルトのスタイルが表示されます。
さらに、border-image-source 属性を使用して境界線のデフォルト スタイルを画像に置き換えるだけでなく、グラデーションを使用して境界線スタイルを定義することもできます。属性の構文形式は次のとおりです。
border-image-source:none|<画像>
これらのうち、none は border-image-source 属性のデフォルト値ではありません。これは、画像が境界線のデフォルト スタイルを置き換えるために使用されないことを意味します。<image> は、url() 関数またはLinear-gradient() 関数を使用して定義されたグラデーション カラー。デフォルトの境界線スタイルを置き換えるために使用されます。
[例] border-image-source 属性を使用して、デフォルトの境界線スタイルを画像に置き換えます。
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);}</style></head ><body><div>デフォルトの枠線を画像に置き換えます</div></body></html>実行結果:
実行結果から、border-image-source 属性を使用するだけでは目的の効果を達成できないことがわかります。他のいくつかの関数を見てみましょう。
2. ボーダー画像スライス
border-image-slice 属性は、border-image-source 属性を通じてロードされたイメージを分割するために使用されます。属性の構文形式は次のとおりです。
ボーダー画像スライス：[<数値>|<パーセンテージ>]{1,4}&&fill?border-image-slice プロパティは、次の 3 種類の値を受け取ることができます。
1. <数値>: 数値で画像の分割位置を指定します。数値は画像のピクセル位置またはベクトル座標を表します。負の値は使用できません。
2. <percentage>: 画像サイズに対するパーセンテージ。画像の幅は水平方向に影響し、高さは垂直方向に影響します。
3. fill: 境界線画像の中央部分を残します。
border-image-slice 属性では画像を上下左右の 4 方向に分割することができ、画像を 4 隅、4 辺、中央領域の 9 つの部分に分割します。以下に示すように、キーワード fill が追加されない限り、透明 (つまり、画像の塗りつぶしなし) になります。
fill キーワードに加えて、border-image-slice 属性は 1 ～ 4 個のパラメータ値を受け入れることができます。
1. 4 つのパラメータ値がすべて指定されている場合、画像は上、右、下、左の順序でセグメント化されます。
2. 3 つのパラメータが指定された場合、最初のパラメータは上部に使用され、2 番目のパラメータは左側と右側に使用され、3 番目のパラメータは下部に使用されます。
3. 2 つのパラメータが指定された場合、最初のパラメータは上下に使用され、2 番目のパラメータは左と右に使用されます。
4. パラメータが 1 つだけ指定されている場合は、この値を使用して上、右、下、左が分割されます。
[例] border-image-slice 属性を使用して、border-image-source 属性で読み込んだ画像を分割します。
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; }</style></head><body><div>デフォルトの枠線を画像に置き換えます</div></body></html>実行結果:
3. ボーダー画像の幅
border-image-width プロパティは、border-image-source プロパティを通じて読み込まれる画像の太さ (幅) を設定するために使用されます。このプロパティの構文形式は次のとおりです。
境界画像の幅: [<長さ>|<パーセント>|<数値>|自動]{1,4}構文は次のように説明されます。
1. <length>: 数値と単位を使用して画像の境界線の幅を指定します。負の値は許可されません。
2. <percentage>: 画像境界線の幅をパーセント形式で指定し、画像境界領域の幅と高さを参照して変換します。負の値は許可されません。
3. <number>: 浮動小数点数を使用して画像の境界線の幅を指定します。この値は、border-width の倍数に相当します。たとえば、値が 2 の場合、パラメータの実際の値は 2 * border です。 -width 負の値は許可されません。
4. auto: ブラウザによって自動的に設定されます。 border-image-width が auto に設定されている場合、実際の値は border-image-slice と同じになります。
ヒント: border-image-width 属性のデフォルト値は 1 です。つまり、border-image-width 属性の値を省略すると、この属性の値は 1 * border-width に設定されます。 -width 値を直接使用するのと同じです。
border-image-width プロパティは、1 ～ 4 個のパラメーター値も受け入れることができます。
1. 4 つのパラメータ値がすべて指定された場合、画像境界線の 4 方向の幅は上、右、下、左の順に設定されます。
2. 3 つのパラメータが指定された場合、最初のパラメータは上の境界線に使用され、2 番目のパラメータは左右の境界線に使用され、3 番目のパラメータは下の境界線に使用されます。
3. 2 つのパラメータが指定された場合、最初のパラメータは上下の境界線に使用され、2 番目のパラメータは左右の境界線に使用されます。
4. パラメータが 1 つだけ指定されている場合は、上、右、下、左の値が画像境界線の幅の設定に使用されます。
[例] border-image-width プロパティを使用して、画像の境界線の幅を設定します。
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; border-image-width:10px10.515px;}</style></head><body><div>デフォルトの境界線を画像に置き換えます</div></body></html>実行結果:
4. ボーダーイメージアウトセット
border-image-outset 属性は、境界線を基準とした画像境界線の外側のオフセット距離を定義するために使用されます (画像境界線がボックス モデルを超えて広がるように)。この属性の構文形式は次のとおりです。
ボーダーイメージアウトセット：[<長さ>|<数値>]{1,4}構文は次のように説明されます。
1. <length>: 特定の値に単位を加えた形式で画像境界線の外側のオフセット距離を指定します。負の値は許可されません。
2. <number>: 浮動小数点数を使用して、画像の境界線の外側のオフセット距離を指定します。この値は、border-width の倍数を表します。たとえば、値は 2 です。これは、オフセットが 2 * border-width であることを意味します。負の値は許可されません。
1. border-image-outset 属性は、1 ～ 4 個のパラメータ値も受け入れることができます。
2. 4 つのパラメータ値がすべて指定されている場合、4 つの辺は上、右、下、左の順序で適用されます。
3. 3 つのパラメータ値が指定された場合、最初のパラメータは上の境界線に使用され、2 番目のパラメータは左右の境界線に使用され、3 番目のパラメータは下の境界線に使用されます。
4. 2 つのパラメータが指定された場合、最初のパラメータは上下の境界線に使用され、2 番目のパラメータは左右の境界線に使用されます。
5. パラメータが 1 つだけ指定されている場合、そのパラメータは 4 つの側面すべてに同時に適用されます。
[例] border-image-outset 属性を使用して、境界線に対する画像境界線の外側のオフセットを設定します。
5. ボーダーイメージリピート
border-image-repeat 属性は、border-image-slice 属性で分割された画像の境界線を塗りつぶす方法 (タイリング、ストレッチなど) を設定するために使用されます。この属性の構文形式は次のとおりです。
ボーダーイメージリピート：[ストレッチ|リピート|ラウンド|スペース]{1,2}構文は次のように説明されます。
1. ストレッチ: 分割された画像を境界領域を満たすようにストレッチします。
2. 繰り返し: セグメント化された画像を繰り返しタイリングして境界領域を埋めます。画像が境界に達すると、余分な部分が切り捨てられます。
3.round:repeat キーワードと同様ですが、背景画像を整数回並べることができない場合、画像は状況に応じて拡大縮小されます。
4. space:repeat キーワードと似ていますが、背景画像を整数回並べることができない場合、画像の周りの空白のギャップが埋められる点が異なります。
border-image-repeat 属性は 1 ～ 2 個のパラメータ値を受け入れることができます。
1. 2 つのパラメータが指定された場合、最初のパラメータは水平方向に使用され、2 番目のパラメータは垂直方向に使用されます。
2. パラメータが 1 つだけ指定されている場合、値は水平方向と垂直方向の両方に適用されます。
[例] border-image-repeat 属性を使用して、画像境界線の塗りつぶし方法を設定します。
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; border-image-repeat:roundrepeat;}</style></head><body><div>デフォルトの境界線を画像に置き換えます</div></body></html>実行結果:
6. ボーダー画像
border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat のプロパティを理解したら、border-image プロパティに戻って見てみましょう。 border-image 属性は、5 つの border-image-* 属性の略称であり、border-image 属性を通じて 5 つの border-image-* 属性を同時に設定できます。
[例] border-image 属性を使用して画像の境界線を設定します。
