Comprendre Border-Image avec des arrière-plans dégradés

Introduction

Border-image est un CSS propriété qui permet de définir une bordure personnalisée à l’aide d’une image. Lorsqu'il est utilisé avec un arrière-plan à dégradé linéaire, il peut créer des styles de bordure complexes et dynamiques.

Comprendre la tranche d'image de bordure avec une image de bordure dégradée

L'image de bordure La propriété -slice spécifie les décalages des neuf tranches d'image utilisées pour créer la bordure. Dans le cas d'une image à bordure dégradée, une valeur sans unité pour border-image-slice représente un décalage en pixels par rapport au bord de l'élément.

Répartition de l'image à bordure dégradée :

La fonction repeating-linear-gradient() crée un fond dégradé avec les arrêts suivants :

• 000 : Début du dégradé

• 000 1,5% : Début de la bande transparente

• transparent 1,5% : Fin de la bande transparente
• transparent 5% : Fin du dégradé

Relation entre Border-Image-Width et Border-Image-Slice

Dans l'exemple donné, la border-image-slice est spécifiée comme 80, ce qui dans ce cas représente 80 pixels . Ceci est égal à la largeur de bordure de 5em, ce qui se traduit par 80 px dans l'affichage actuel.

Calcul de la tranche d'image de bordure

La tranche d'image de bordure la valeur est calculée sur la base de la formule suivante :

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

Si border-image-width n'est pas spécifié, la valeur par défaut est border-width.

Dans ce cas :

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

Impact des unités sur Border-Image-Slice

Lorsque vous utilisez une valeur sans unité pour border-image-slice, elle est mesurée en pixels. Cependant, si vous utilisez des unités comme em ou %, la valeur sera relative à la taille de l'élément.

Explication visuelle

[Insérer un croquis ici]

Le croquis montre la relation entre la bordure-image-tranche, la bordure-image-largeur et la bordure-largeur. En ajustant la valeur border-image-slice, vous pouvez repositionner les tranches d'image dans les régions frontalières.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!