CSSボーダー画像でWebを飾る

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

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

キーポイント

• CSSを使用すると、border-image-sourceプロパティを使用して境界に背景画像を追加するなど、ほんの数行のコードを含む複雑な境界線をWebページに追加できます。
• border-image-slice選択された画像を境界線に適用し、画像を4つのコーナー、4つの側面、1つの中央領域に分割します。 。
• border-image-widthプロパティは、ボーダー画像領域内の内部オフセットを設計しますが、border-image-outsetプロパティにより、ボーダー画像領域をボーダーフレームの外側に押し込むことができます。
• 略語borderプロパティを使用して、border-imageプロパティをリセットできます。プロパティは、要素の4つの境界すべての幅、色、スタイルをすばやくリセットできます。執筆時点では、border-imageはほとんどすべての主要なブラウザで完全にサポートされています。

ボーダー画像プロパティ

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

、

が含まれます。

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

属性

このプロパティを使用すると、要素の境界に背景画像を割り当てることができます。この値は通常、画像のURLです。

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

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

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

ブラウザでは、次のように見えます：

このプロパティを

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

属性

border-image-slice

プロパティを使用して画像を選択した後、

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

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

詳細を詳細に学びましょう。このプロパティデザインは、上部、右、下、左の内部オフセットから来ています。これらのオフセットは、最終的に小さな画像を9つの領域、4つの角、4つの側面、1つの中央領域に削減します。

1〜4つの数値またはパーセンテージ値を指定できます。 4つの値を指定すると、上部、右、下、および骨折したオフセットに適用されます。残りのオフセットをスキップすると、これは正しいオフセットと同じになります。ボトムオフセットを逃した場合、これはトップと同じになります。オフセットの値を右に省略すると、トップと同じになります。 1つの値のみを使用する場合、4つのオフセットすべてに使用されます。

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

数値は、画像のピクセルを表します。または、ベクトル画像の場合は座標を表します。もう1つのポイント、番号の後にpxを追加しないでください、これは機能しません！

以下は、border-image-slice：

の使用方法です

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

element {
  border-image-slice: 19;
}

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

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

中央の領域は完全に透明であるように見え、したがって見えません。目に見えるようにしたい場合は、

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

キーワードを追加せずに完全に不透明な中間領域を持つ画像を使用すると、上記の例とまったく同じです。ただし、次のように

キーワードを適用してください fill fill中央の領域に詳細を含む画像を使用してください：

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

それから、画像の中央領域がページに完全に表示されていることがわかります。

属性

このプロパティは、いわゆるボーダー画像領域内に描かれています。デフォルトでは、この領域の境界は境界ボックスの境界です。

プロパティと同様に、border-image-widthの設計内部オフセットを設計し、画像を9つの領域に分割します。

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

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

…境界画像の幅を境界幅の3倍、つまり19ピクセルに設定します。結果は次のとおりです

同じ値をおよびborder-image-widthプロパティに割り当てることで、境界イメージが不要な変形なしで最適な状態で表示されることを確認しました。 border-image-slice

属性border-image-outset

私がこれまでに使用したすべてのプロパティは、デフォルトで埋め込まれたボーダー画像領域にデフォルトでした。ただし、ボーダーボックスの外側のボーダーイメージエリアをプッシュすることを選択できます。

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

このプロパティは、1〜4個の値（上、右、下、左）を使用し、長さの数または単位（

、pxなど）で表されます。数字を使用すると、境界線画像がボーダーボックスの外に押され、倍数が計算された境界幅になります。 em さらに説明するために、私は境界を表すために緑の点線の輪郭を描きました。ボーダーイメージエリアには、ピンク色のボーダー画像が含まれています。デフォルトの組み込み状態では、境界線画像は緑のアウトライン内にあります。これは、ボーダーイメージエリアが境界フレーム内にあることを意味します。

CSSルールセットに

を追加すると、点線の緑の輪郭を越えてピンクの境界線画像が押します。これは、国境の画像エリアが国境の外に描かれていることを意味します： border-image-outset: 19px;

ボーダーボックスの外側にあるボーダー画像パーツは、スクロールをトリガーしないことも、マウスイベントもキャプチャされないことに注意してください。

属性

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

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

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

この記事の執筆時点では、Firefoxはと同じとレンダリングされているように見えますが、Chromeは

と同じと同じとレンダリングします。 space stretchspace略語属性repeat

上記のすべての個々のプロパティを次のように

略語プロパティに圧縮できます。 border-image

border-image

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
以下はコードスニペットです：
5. border-image-repeat
ボーダー画像を削除したい場合はどうすればよいですか？

国境をリセットする最良の方法は、略語

属性を使用することです。

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

を使用すると、要素の4つの境界すべての幅、色、スタイルをすばやくリセットできます。 A ルールを指定する必要はなく、単一の

属性をオーバーライドする必要もありません。

ブラウザサポートborder border執筆時点で、border-image: noneはほとんどすべての主要なブラウザで完全にサポートされています。 Firefoxのみが要素全体にSVG画像を伸ばすことはできません。OperaMiniは、border-imageプレフィックスで略語構文をサポートしますが、単一の属性をサポートしていません。

結論

この記事では、主に

属性を紹介します。それが受け入れる値、使用する最良の方法、および執筆時点でのブラウザのサポートレベルを紹介します。 border-image -o-CSSのバックグラウンドとボーダーレベル3の仕様ドキュメントで詳細を見つけることができます。

プロジェクトで

属性を使用している場合、最終結果をコミュニティと共有してみませんか？

border-imageあなたの返事を楽しみにしています！

CSSボーダー画像を使用したWebページの装飾に関する

FAQ（FAQ）

CSSボーダー画像を作成する方法は？ border-image

CSSボーダー画像の作成には、

属性の使用が含まれます。このプロパティを使用すると、要素の周りの境界として使用される画像を指定できます。このプロパティの構文は次のとおりです

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

sourceは、使用する画像のURLです。 slice画像の内部オフセットを定義します。 width境界線の幅を設定します。 outset国境を越えた境界画像エリアからの距離を決定します。 repeat画像のタイルまたは繰り返しの方法を指定します。

CSSのさまざまなボーダースタイルは何ですか？

CSSは、Web要素の外観をカスタマイズするために使用できるいくつかのボーダースタイルを提供します。これらには次のものが含まれます。 、noneおよびhidden。各スタイルは異なる視覚効果を生成します。たとえば、dottedは一連のドットと境界線を作成しますが、dashedはダブルラインの境界線を作成します。 solid double CSSを使用して組み込み境界線を作成する方法は？ groove ridgeインラインの境界線は、insetボーダースタイルを使用してCSSで作成できます。このスタイルにより、ボックスはページに埋め込まれているように見えます。構文は次のとおりです outset dotted要素のさまざまな側面に異なるボーダースタイルを使用できますか？ double

はい、CSSを使用すると、要素のさまざまな側面に異なるボーダースタイルを適用できます。

、

、

、およびinsetプロパティを使用して、両側のスタイルを指定できます。

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

CSSボーダー画像のサイズを制御する方法は？

プロパティを使用して、CSSボーダー画像のサイズを制御できます。このプロパティは、境界領域のサイズを定義することにより、境界画像の幅を設定します。ピクセルの幅または要素ボックスの割合として指定できます。 border-top-style border-right-style CSSの境界としてグラデーション画像を使用できますか？ border-bottom-style border-left-styleはい、CSSを使用すると、グラデーション画像を境界として使用できます。

関数を使用してグラデーション画像を作成し、

プロパティを使用して境界画像として使用できます。

CSSボーダー画像を繰り返す方法は？ border-image-width

CSSの

属性は、ボーダーイメージの繰り返しを制御します。考えられる値は

（デフォルト）、

、linear-gradient、およびborder-imageです。

画像をスケーリングしてエリアを埋めます。

タイル画像。

画像をタイルしますが、正確に一致するようにスケーリングします。

画像をタイルしますが、タイルの間にスペースを残します。 border-image-repeat stretchcssのrepeat属性とround属性の違いは何ですか？ space stretch CSSのrepeat属性は、要素の境界のスタイル、幅、色を設定するために使用されます。一方、roundプロパティでは、要素の周りの境界として画像を使用できます。 space

丸い角でCSSボーダー画像を使用できますか？

はい、丸い角でCSSボーダー画像を使用できます。 border-radiusプロパティを使用して丸い角を作成し、border-imageプロパティを使用して境界画像を適用できます。

CSSで点線の境界線を作成する方法は？

破線の境界線は、dashedボーダースタイルを使用してCSSで作成できます。構文は次のとおりです

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

これにより、一連の短い線または点線で境界線が作成されます。

以上がCSSボーダー画像でWebを飾るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。