border-image とグラデーションの背景を組み合わせて、複雑な境界線スタイルを作成するにはどうすればよいですか?

グラデーションの背景を持つ境界線画像を理解する

はじめに

境界線画像は CSS です画像を使用してカスタム境界線を定義できるプロパティ。線形グラデーションの背景と一緒に使用すると、複雑で動的な境界線スタイルを作成できます。

グラデーション境界線イメージを使用した境界線イメージ スライスを理解する

境界線イメージ-slice プロパティは、境界線の作成に使用される 9 つの画像スライスのオフセットを指定します。グラデーション境界画像の場合、border-image-slice の単位のない値は、要素の端からのピクセル オフセットを表します。

グラデーション境界画像の内訳:

repeat-linear-gradient() 関数は、次のストップを持つグラデーション背景を作成します:

• 000: グラデーションの開始

• 000 1.5%: 透明バンドの開始

• 透明 1.5%: 透明バンドの終了
• 透明 5%: グラデーションの終了

Border-Image-Width と Border-Image-Slice の関係

指定された例では、border-image-slice は 80 と指定されており、この場合は 80 ピクセルを表します。これは、ボーダー幅の 5em に等しく、現在の表示では 80 ピクセルに変換されます。

ボーダーイメージスライスの計算

ボーダーイメージスライス値は次の式に基づいて計算されます:

border-image-slice = border-image-width - border-width

border-image-width が指定されていない場合、デフォルトは border-width になります。

この場合:

border-image-slice = 80 (border-width) - 80 (border-image-width)

Border-Image-Slice に対する単位の影響

border-image-slice に単位のない値を使用する場合、その値はピクセル単位で測定されます。ただし、em や % などの単位を使用する場合、値は要素のサイズに相対的なものになります。

視覚的な説明

[ここにスケッチを挿入]

このスケッチは、border-image-slice、border-image-width、border-width の関係を示しています。 border-image-slice の値を調整することで、境界領域内の画像スライスの位置を変更できます。

以上がborder-image とグラデーションの背景を組み合わせて、複雑な境界線スタイルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。