CSS のグラデーション背景では、border-image-slice はどのように機能しますか?

グラデーション背景の境界線画像: 番号 80 を理解する

CSS では、境界線画像を使用すると、ラスター画像またはベクター画像を次のように使用できます。要素の周囲の境界線。提供されたコードに見られるように、グラデーションの背景に適用すると、この構文では、border-image-slice プロパティがどのように機能するかについて疑問が残る場合があります。

CSS 仕様によれば、border-image-slice は、ラスター イメージのピクセル単位のエッジ オフセット。ただし、グラデーション背景の場合、要素のサイズに相対的です。

この例では、border-image-slice の値は 80 に設定されています。この値は単位なしであり、次のように仮定されます。ピクセル単位になります。したがって、この場合、80px は境界線の作成に使用される画像のサイズです。

border-image-width プロパティは境界線の幅を定義します。この例では、要素のフォント サイズの約 5 倍である 5em に設定されています。これは、境界線の幅がすべての辺で 5em になることを意味します。

これらの値がどのように相互作用するかを理解する鍵は、最初の画像が境界線のサイズに合わせて拡大縮小されていることを理解することです。この場合、最初の画像はグラデーションの背景です。したがって、グラデーションの背景は幅 80 ピクセル、高さ 5em にスケールされます。

次に、border-image-slice プロパティは、このスケールされた画像を 9 つの領域にスライスする方法を定義します。これらの領域は、次のように要素の周囲に配置されます。

• 上と左の領域は、境界線の上/左隅として配置されます。
• 下と右の領域は、配置されます。
• 上下の両側の領域は、境界線の幅に合わせて引き伸ばされます。
• 左側の両側の領域

したがって、この例の border-image-slice 値 80px は、スケーリングされたグラデーション背景が 9 つの 80px 正方形にスライスされることを意味します。これらの正方形は、上で説明したように要素の周囲に配置されて境界線を形成します。

border-image-slice と border-image-width の値を調整することで、境界線の外観を制御できます。さまざまな値を試してみると、デザインに望ましい効果を得ることができます。

以上がCSS のグラデーション背景では、border-image-slice はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。