Comment fonctionne border-image-slice avec un arrière-plan dégradé en CSS ?

Border-Image dans des arrière-plans dégradés : comprendre le numéro 80

En CSS, border-image nous permet d'utiliser une image raster ou vectorielle comme une bordure autour d'un élément. Lorsqu'elle est appliquée à un arrière-plan dégradé, comme le montre le code fourni, la syntaxe peut laisser quelques questions sur le fonctionnement de la propriété border-image-slice.

Selon les spécifications CSS, border-image-slice représente un décalage des bords en pixels pour les images raster. Cependant, dans le cas d'un fond dégradé, elle est relative à la taille de l'élément.

Dans l'exemple fourni, la valeur border-image-slice est définie sur 80. Cette valeur est sans unité, ce qui signifie qu'elle est supposée être en pixels. Ainsi, dans ce cas, 80px est la taille de l'image qui sera utilisée pour créer la bordure.

La propriété border-image-width définit la largeur de la bordure. Dans cet exemple, la taille est définie sur 5em, soit environ 5 fois la taille de police de l'élément. Cela signifie que la bordure aura une largeur de 5 em de tous les côtés.

La clé pour comprendre comment ces valeurs interagissent est de réaliser que l'image initiale est mise à l'échelle pour s'adapter à la taille de la bordure. Dans ce cas, l’image initiale est le fond dégradé. Ainsi, l'arrière-plan dégradé sera mis à l'échelle pour avoir une largeur de 80 px et une hauteur de 5 em.

La propriété border-image-slice définit ensuite comment cette image mise à l'échelle est découpée en neuf régions. Ces régions sont ensuite placées autour de l'élément comme suit :

• Les régions du haut et de gauche sont placées comme coins supérieur/gauche de la bordure.
• Les régions du bas et de droite sont placées comme coins inférieur/droit de la bordure.
• Les régions de chaque côté du haut/bas sont étirées pour s'adapter à la largeur de la bordure.
• Le les régions de chaque côté de gauche/droite sont étirées pour s'adapter à la hauteur de la bordure.

Ainsi, la valeur border-image-slice de 80px dans cet exemple signifie que l'arrière-plan dégradé mis à l'échelle sera découpé en neuf carrés de 80 pixels. Ces carrés seront ensuite placés autour de l'élément comme décrit ci-dessus pour former la bordure.

En ajustant les valeurs border-image-slice et border-image-width, vous pouvez contrôler l'apparence de la bordure. Expérimenter différentes valeurs peut vous aider à obtenir l'effet souhaité pour votre conception.

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!