以前は、Webページ（ファンシーボーダーなど）に裝飾的な要素を追加するには、畫(huà)像をスライスし、効果が満足するまでCSSコードを辛抱強(qiáng)く調(diào)整する必要がありました。

CSSはこのプロセスを簡(jiǎn)素化するようになりました。あなたのウェブサイトにかなり複雑な境界線(xiàn)を追加するためのコードのほんの數(shù)行。この記事では、これを行う方法を示します。

キーポイント

• CSSを使用すると、border-image-sourceプロパティを使用して境界に背景畫(huà)像を追加するなど、ほんの數(shù)行のコードを含む複雑な境界線(xiàn)をWebページに追加できます。
• border-image-slice選択された畫(huà)像を境界線(xiàn)に適用し、畫(huà)像を4つのコーナー、4つの側(cè)面、1つの中央領(lǐng)域に分割します。 。
• border-image-widthプロパティは、ボーダー畫(huà)像領(lǐng)域內(nèi)の內(nèi)部オフセットを設(shè)計(jì)しますが、border-image-outsetプロパティにより、ボーダー畫(huà)像領(lǐng)域をボーダーフレームの外側(cè)に押し込むことができます。
• 略語(yǔ)borderプロパティを使用して、border-imageプロパティをリセットできます。プロパティは、要素の4つの境界すべての幅、色、スタイルをすばやくリセットできます。執(zhí)筆時(shí)點(diǎn)では、border-imageはほとんどすべての主要なブラウザで完全にサポートされています。

ボーダー畫(huà)像プロパティ

ボーダースタイルを設(shè)定する一般的な方法は、プリセットborder-styleルールを使用することです。これらのルールには、dotted、dashed、solid、double、groove、ridge、inset、outset、

が含まれます。

これらのスタイルはすでにかなりの數(shù)のオプションを提供しています。ただし、さらに一歩進(jìn)んで、次のCSSプロパティを使用して、境界線(xiàn)に魅力的な背景畫(huà)像を追加できます。 border-image-source

屬性

element {
  border-image-source: url('myimage.png');
}

CSSグラデーション効果が同じくらい良いことがわかります：

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

ブラウザでは、次のように見(jiàn)えます：

値に設(shè)定する場(chǎng)合、または畫(huà)像を表示できない場(chǎng)合、ブラウザはプロパティの値セットを使用します。したがって、バックアッププランとしてnoneを使用することをお?jiǎng)幛幛筏蓼埂?border-style border-style使用している畫(huà)像は、境界線(xiàn)の幅と高さに一致する必要はありません。 CSSボーダー畫(huà)像の美しさは、さまざまな畫(huà)面サイズに適応する要素を含む、あらゆる幅と高さの要素の境界線(xiàn)を飾るために小さな畫(huà)像だけが必要なことです。

border-image-slice

プロパティを使用して境界に適用できます。 border-image-source

element {
  border-image-source: url('myimage.png');
}

詳細(xì)を詳細(xì)に學(xué)びましょう。このプロパティデザインは、上部、右、下、左の內(nèi)部オフセットから來(lái)ています。これらのオフセットは、最終的に小さな畫(huà)像を9つの領(lǐng)域、4つの角、4つの側(cè)面、1つの中央領(lǐng)域に削減します。

1?4つの數(shù)値またはパーセンテージ?jìng)帳蛑付à扦蓼埂?4つの値を指定すると、上部、右、下、および骨折したオフセットに適用されます。殘りのオフセットをスキップすると、これは正しいオフセットと同じになります。ボトムオフセットを逃した場(chǎng)合、これはトップと同じになります。オフセットの値を右に省略すると、トップと同じになります。 1つの値のみを使用する場(chǎng)合、4つのオフセットすべてに使用されます。

割合値とは、畫(huà)像サイズの割合、つまり水平オフセットの畫(huà)像幅と垂直オフセットの畫(huà)像高さを指します。

數(shù)値は、畫(huà)像のピクセルを表します。または、ベクトル畫(huà)像の場(chǎng)合は座標(biāo)を表します。もう1つのポイント、番號(hào)の後にpxを追加しないでください、これは機(jī)能しません！

以下は、border-image-slice：

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

element {
  border-image-slice: 19;
}

境界としてサイズ100 x 100ピクセルの畫(huà)像を使用し、その外観は次のとおりです。

最終効果は次のとおりです

キーワードを追加します。 たとえば、fill

キーワードを適用してください fill fill中央の領(lǐng)域に詳細(xì)を含む畫(huà)像を使用してください：

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

それから、畫(huà)像の中央領(lǐng)域がページに完全に表示されていることがわかります。

屬性

プロパティと同様に、border-image-widthの設(shè)計(jì)內(nèi)部オフセットを設(shè)計(jì)し、畫(huà)像を9つの領(lǐng)域に分割します。

このプロパティは、1?4個(gè)の値（上、右、下、左）を受け入れ、數(shù)字またはパーセンテージを使用できます。パーセンテージは、ボーダー畫(huà)像領(lǐng)域のサイズ、つまり水平オフセットの面積幅と垂直オフセットの面積高さに関連しています。 border-image-slice単位なしで數(shù)値を使用する場(chǎng)合、これらの數(shù)値は、対応する計(jì)算された境界幅の倍數(shù)に等しくなります。たとえば、次のコード：border-image-width

element {
  border-image-source: url('myimage.png');
}

…境界畫(huà)像の幅を境界幅の3倍、つまり19ピクセルに設(shè)定します。結(jié)果は次のとおりです

同じ?jìng)帳?img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027260190054.jpg" class="lazy" alt="Decorating the Web with CSS Border Images " />およびborder-image-widthプロパティに割り當(dāng)てることで、境界イメージが不要な変形なしで最適な狀態(tài)で表示されることを確認(rèn)しました。 border-image-slice

屬性border-image-outset

屬性を使用して実裝できます。 border-image-outset

、pxなど）で表されます。數(shù)字を使用すると、境界線(xiàn)畫(huà)像がボーダーボックスの外に押され、倍數(shù)が計(jì)算された境界幅になります。 em さらに説明するために、私は境界を表すために緑の點(diǎn)線(xiàn)の輪郭を描きました。ボーダーイメージエリアには、ピンク色のボーダー畫(huà)像が含まれています。デフォルトの組み込み狀態(tài)では、境界線(xiàn)畫(huà)像は緑のアウトライン內(nèi)にあります。これは、ボーダーイメージエリアが境界フレーム內(nèi)にあることを意味します。

を追加すると、點(diǎn)線(xiàn)の緑の輪郭を越えてピンクの境界線(xiàn)畫(huà)像が押します。これは、國(guó)境の畫(huà)像エリアが國(guó)境の外に描かれていることを意味します： border-image-outset: 19px;

border-image-repeatこのプロパティは、境界線(xiàn)の側(cè)面と中央部の畫(huà)像スライスをスケーリングおよびタイルする方法に関するいくつかの選択肢を提供します。最初の値は水平面（上部と下）に適用され、2番目の値は垂直側(cè)（右と左）に適用されます。 1つの値のみを設(shè)定すると、値は水平方向と垂直の両方に適用されます。

利用可能な値には次のものが含まれます

• stretch - border-image-repeat屬性を使用しない場(chǎng)合、これがデフォルト値です。このキーワードは、畫(huà)像を伸ばして利用可能な領(lǐng)域を埋めます。
• repeat - 畫(huà)像タイリングが繰り返され、利用可能な領(lǐng)域を埋めます。利用可能な領(lǐng)域がタイル張りの幅によって分割されない場(chǎng)合、畫(huà)像は切斷される可能性があります。
• round - repeatと同じですが、スペースがタイルに対応するのに十分でない場(chǎng)合、タイルはすべてフィットするまで拡張されます。これにより、タイルが遮斷されることはありませんが、畫(huà)像は少し圧縮される可能性があります。
• space - repeatと同じですが、スペースがタイル幅の正確な倍數(shù)ではない場(chǎng)合、各タイルの周りに余分な白い空間が均等に分布します。

element {
  border-image-source: url('myimage.png');
}

element {
  border-image-source: url('myimage.png');
}

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

element {
  border-image-source: url('myimage.png');
}