線形グラデーションの境界線で「border-image-slice」を効果的に使用するにはどうすればよいですか?

border-image は線形グラデーション境界線でどのように機能しますか?

border-image-slice プロパティは、ラスター イメージのエッジ オフセットを指定します。ベクトル画像の座標。 CSS 仕様によれば、この値は単位のない数値であり、ラスター イメージのピクセルまたはベクター イメージの相対座標を表します。ただし、グラデーションを使用する場合、特定の複雑さが生じます。

グラデーション境界線イメージ

この例では、グラデーション境界線イメージを次のように定義しました。

border-image: repeating-linear-gradient(45deg, #000, #000 1.5%, transparent 1.5%, transparent 5%) 80;

ここで、80 は画像スライスのサイズを指定します。グラデーションを使用する場合、画像のサイズは要素のサイズと等しいとみなされます。 border-image-width は、スライスが配置される 9 つの領域を定義します (定義されていない場合は、border-width が使用されます)。

border-image-slice について

仕様に従って、border-image-slice プロパティは初期画像を考慮してスライスを作成します。単位のない値 (例では 80 など) を指定すると、ピクセル値として解釈されます。パーセンテージ値は要素のサイズに対して解決されます。

スライスと領域

最適な結果を得るには、スライスは境界線で定義された領域と等しくなければなりません。 -画像の幅。あなたの場合、境界線が 5em (5x16px = 80px) であるため、80 は 80 ピクセルを表します。これは、スライスが境界線と同じサイズであることを意味し、グラデーションが正しく位置合わせされることを保証します。

要約すると、グラデーション境界線画像を使用する場合、border-image-slice は border-image-width (または border-image-width) と一致する必要があります。 -width) を使用して、スライスを領域に完全に合わせます。

以上が線形グラデーションの境界線で「border-image-slice」を効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。