border-image-slice を使用してグラデーション境界線の完璧なスライスを実現するにはどうすればよいですか?

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

グラデーション境界線は Web 要素に独特のタッチを加えますが、境界線イメージと境界線イメージがどのように相互作用するかを理解することは重要です。

グラデーションのスライスを理解する

CSS の border-image-slice は、境界線画像を 9 つの領域にスライスすることを定義します。グラデーション境界線の場合、画像サイズは要素のサイズと同じです。 border-image-width が指定されていない場合は、border-width を使用して領域を定義します。

グラデーションの Border-Image-Slice を計算する

目的の効果を実現するには、border- image-slice は、ピクセル単位の border-image-width (単位が指定されていない場合は border-width) と等しくなければなりません。

単位なし値

border-image-slice の単位のない値はピクセル値とみなされます。

パーセンテージ値

border-image-slice のパーセンテージ値は、要素のサイズに対して解決されます。

Example

あなたの例では、ここでborder-image-slice は 80 に設定されています:

境界線の幅は 5em で、80px に変換されます。border-image-slice の
• 80 は単位がなく、次のように扱われます。 80px.
• 80px は境界線の幅 80px と等しいため、グラデーションは次のようになります。

視覚化

[グラデーション境界線スライスのイメージ]

要約

グラデーションの完璧なスライスを実現するには境界線:

設定border-image-slice は border-image-width (または border-width) と同じです。
1. パーセント値の場合、計算された値が境界線の幅と等しいことを確認してください。
2. ピクセルには単位のない値を使用してください-ベースのスライス

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