“Fade” bordures en CSS
Je suis en utilisant border-left: groove
sur un élément, mais je veux la frontière "fondu" dans le fond car elle est sur le point de finir au fond.
J'espère que je suis en train de faire sens. Comment puis-je obtenir quelque chose à cet effet?
- Préférable d'utiliser un gradient de l'image de cette
Vous devez vous connecter pour publier un commentaire.
Vous pouvez spécifier les dégradés de couleurs, dans certaines circonstances, CSS3, et bien sûr, les frontières peuvent être définies sur une couleur, alors vous devriez être en mesure d'utiliser un dégradé comme une bordure de couleur. Cela inclut la possibilité de spécifier une couleur transparente, ce qui signifie que vous devriez être en mesure d'obtenir l'effet que vous êtes après.
Cependant, je n'ai jamais vu utilisé, et je ne sais pas comment bien soutenu qu'il est par les navigateurs actuels. Vous aurez certainement besoin d'accepter qu'au moins certains de vos utilisateurs ne seront pas en mesure de le voir.
Un rapide google est en place ces deux pages qui devraient vous aider sur votre chemin:
Espère que ça aide.
Vous pouvez également utiliser
box-shadow
des biens à plus forte valeur de flou etrgba()
de couleur pour définir le niveau d'opacité.Sonne comme un meilleur choix dans votre cas.
Ajouter cette
class
css
à votre feuille de styleensemble
width
à lawidth
de votre image. et utiliser cettehtml
pour l'imagesi elle ne peut pas donner le même emplacement de la frontière, il sera un gradient de l'air sur la frontière.
source: CSS3 Frontières
Comment estomper les frontières avec les CSS:
<div style="border-style:solid;border-image:linear-gradient(red, transparent) 1;border-bottom:0;">Text</div>
S'il vous plaît excuser les styles en ligne pour le bien de la démonstration. Le 1 propriété de la frontière de l'image est border-image-tranche, et dans ce cas, définit la frontière comme un seul continue de la région.
Source: Gradient De Frontières