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 は 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-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 属性の値がnone または指定された画像が使用できない場合は、表示されます 境界線のデフォルト スタイル。
さらに、border-image-source 属性以外にも、画像を使用して境界線のデフォルト スタイルを置き換えたり、グラデーションを使用して境界線スタイルを定義したりすることもできます。属性の構文は次のとおりです。
border-image-source：none | <image>
このうち、none は border-image-source 属性のデフォルト値であり、境界線のデフォルト スタイルを置き換える画像は使用されないことを意味します。<image> は、url() 関数またはグラデーションで指定された画像パスです。 linear-gradient() 関数で定義された色で、デフォルトのボーダー スタイルを置き換えます。
[例] 画像を使用して、border-image-source 属性を介してデフォルトの境界線スタイルを置き換えます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
}
</style>
</head>
<body>
<div>デフォルトボーダーを画像で置き換える</div>
</body>
</html> 実行結果は次の図のとおりです。
実行結果から、border-image-source プロパティだけでは目的の効果を実現できないことがわかります。他のいくつかの関数を見てみましょう。
2.border-image-slice
border-image-slice 属性は、border-image-source 属性を通じてロードされた画像を分割するために使用されます。属性の構文は次のとおりです。
border-image-slice: [ <number> | <percentage> ]{1,4} && fill?
border-image-slice プロパティは、次の 3 種類の値を受け入れることができます。
- <number>: 値。特定の値で画像セグメンテーションの位置を指定します。値は画像のピクセル位置またはベクトル座標を表します。負の値は許可されません。
- <percentage>: 画像サイズのパーセンテージに対するパーセンテージ。画像の幅は水平方向に影響し、高さは垂直方向に影響します。
- fill: 境界線画像の中央部分を保持します。
border-image-slice 属性は、画像を上下左右の 4 方向で分割することを指定でき、画像を 4 隅、4 辺、中央領域の 9 つの部分に分割します。中央領域は常に透明になります (次の図に示すように、キーワードの塗りつぶしが追加されていない限り、画像の塗りつぶしはありません。
fill キーワードに加えて、border-image-slice 属性は 1~4 個のパラメーター値を受け入れることができます:
- 4 つのパラメーター値がすべて指定されている場合、画像は上、右、下、左の順に分割されます。
- 3 つのパラメーターが指定された場合、最初のパラメーターは上部に使用され、2 番目のパラメーターは左側と右側に使用され、3 番目のパラメーターは下部に使用されます。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは上下に使用され、2 番目のパラメーターは左右に使用されます。
- 引数が 1 つだけ指定されている場合は、その値を使用して上、右、下、左がすべて分割されます。
【例】border-image-source属性で読み込んだ画像をborder-image-slice属性で分割する：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
}
</style>
</head>
<body>
<div>デフォルトボーダーを画像に置き換える</div>
</body>
</html> 実行結果は次の図のとおりです。
3.border-image-width
border-image-width 属性は、border-image-source 属性を通じてロードされた画像の太さ (幅) を設定するために使用されます。属性の構文は次のとおりです。
border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}
構文は次のように説明されています。
- <length>: 値と単位の形式で画像境界線の幅を指定します。負の値は使用できません。
- <percentage>: 画像フレームの幅をパーセント形式で指定し、画像フレーム領域の幅と高さを参照して変換します。負の値は許可されません。
- <number>: 浮動小数点数を使用して、画像の境界線の幅を指定します。この値は、border-width の倍数に対応します。たとえば、値が 2 の場合、パラメータの実際の値は 2 * border- です。幅、および負の値は許可されていません。
- auto: ブラウザーによって自動的に設定されます。border-image-width が auto に設定されている場合、実際の値は border-image-slice と同じです。
ヒント: border-image-width 属性のデフォルト値は 1 です。これは、border-image-width 属性の値を省略すると、属性の値が 1 * border-width に設定されることを意味します。 border を直接使用するのと同等 -width の値。
border-image-width 属性は、1~4 個のパラメーター値を受け入れることもできます:
- 4 つのパラメーター値がすべて指定されている場合、4 方向の画像境界線の幅は、上、右、下、左の順に設定されます。
- 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に使用され、2 番目のパラメーターは左右の境界線に使用され、3 番目のパラメーターは下の境界線に使用されます。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に使用され、2 番目のパラメーターは左右の境界線に使用されます。
- 引数が 1 つだけ指定されている場合、top、right、bottom、および left はすべてその値を使用して、画像の境界線の幅を設定します。
[例] border-image-width プロパティを使用して、画像の境界線の幅を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-width: 10px 1 0.5 15px;
}
</style>
</head>
<body>
<div>ボーダーを画像で置き換える</div>
</body>
</html> 実行結果は次の図のとおりです。
4.border-image-outset
border-image-outset 属性は、画像の境界線が境界線からオフセットされる距離を定義するために使用されます (画像の境界線がボックス モデルを超えて拡張されるように)。この属性の構文は次のとおりです。
border-image-outset：[ <length> | <number> ]{1,4}
構文は次のように説明されています。
- <length>: 特定の値に単位を加えた形式で外側にオフセットする画像境界線の距離を指定します。負の値は使用できません。
- <number>: 浮動小数点数を使用して、画像の境界線の外側のオフセット距離を指定します. この値は、border-width の倍数を表します. たとえば、値が 2 の場合、オフセットは 2 * border-width であることを意味します.負の値は許可されません。
border-image-outset 属性は、1~4 個のパラメータ値も受け入れることができます:
- 4 つのパラメーター値がすべて指定されている場合、4 つの側面は上、右、下、左の順に作用します。
- 3 つのパラメーター値が指定されている場合、最初のパラメーターは上の境界線に使用され、2 番目のパラメーターは左右の境界線に使用され、3 番目のパラメーターは下の境界線に使用されます。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に使用され、2 番目のパラメーターは左右の境界線に使用されます。
- パラメータが 1 つだけ指定されている場合は、4 つの側面すべてに同時に適用されます。
[例] border-image-outset 属性を使用して、境界線に対する画像境界線の外側オフセットを設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
margin: 30px 0px 0px 30px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-outset: 25px;
background-color: #CCC;
}
</style>
</head>
<body>
<div>デフォルトのフレームを画像で置き換える</div>
</body>
</html> 実行結果は次の図のとおりです。
5.border-image-repeat
border-image-repeat 属性は、タイリング、ストレッチなど、border-image-slice 属性で分割された画像の境界を塗りつぶす方法を設定するために使用されます。この属性の構文は次のとおりです。
border-image-repeat：[ stretch | repeat | round | space ]{1,2}
構文は次のように説明されています。
- stretch: セグメント化された画像は、フレーム領域を埋めるために引き伸ばされます。
- repeat: 分割された画像は、境界領域を埋めるために繰り返しタイル化されます.画像が境界に当たると、余分な部分が切り捨てられます;
- round: repeat キーワードと同様に、違いは、背景画像を整数回並べることができない場合、状況に応じて画像がスケーリングされることです。
- space: repeat キーワードと同様ですが、背景画像を整数回並べることができない場合、画像の周りに空白が埋められます。
border-image-repeat 属性は、1~2 個のパラメータ値を受け入れることができます:
- 2 つのパラメーターが指定されている場合、最初のパラメーターは水平方向に使用され、2 番目のパラメーターは垂直方向に使用されます。
- 引数が 1 つだけ指定されている場合、値は水平方向と垂直方向の両方に適用されます。
[例] border-image-repeat プロパティを使用して、画像の境界線の塗りつぶし方法を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-repeat: round repeat;
}
</style>
</head>
<body>
<div id="container">border-image-repeat</div>
</body>
</html> 実行結果は次の図のとおりです。
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 属性を使用して、画像の境界線を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image: url(./border.png) 27 round;
}
</style>
</head>
<body>
<div>デフォルトのボーダーを画像で置き換える</div>
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
