Comment rendre la bordure transparente en CSS

Comment rendre la bordure transparente avec CSS : créez d'abord un exemple de fichier HTML ; puis créez un div dans le corps ; enfin définissez le style "border-top:10px solid rgba(200,200,200,0.25);" le div, c'est-à-dire rend la bordure spécifiée transparente.

L'environnement d'exploitation de cet article : système windows7, version HTML5&&CSS3, ordinateur DELL G3

La transparence est généralement considérée comme un attribut de couleur, mais il n’existe pas une telle valeur numérique. Nous avons trouvé le meilleur moyen de rendre div transparent. L'utilisation de RGBA

RGBA ajoute des paramètres pour contrôler la transparence alpha basée sur RVB. Il existe trois paramètres : R (rouge), G (vert) et B (bleu). La plage de valeurs entières positives est : 0 – 255 ou la plage de valeurs en pourcentage est : 0,0 % – 100,0 %. Les valeurs en dehors de la plage sont arrondies à la limite de valeur la plus proche. Tous les navigateurs ne prennent pas en charge l'utilisation de valeurs en pourcentage. Un paramètre, dont la valeur est comprise entre 0 et 1, ne peut pas être négatif

Exemple de syntaxe RGBA :

.div {background: rgba(200,200,200,0.5);}

Ensuite, nous montrerons comment rendre la bordure transparente :

à div Définissez le style suivant :

div {    width: 100px;    
height:100px;    border-top:10px solid  rgba(200,200,200,0.25);    border-right:10px solid  rgba(200,200,200,0.5);    border-bottom: 10px solid  rgba(200,200,200,0.75);    border-left:10px solid  rgba(200,200,200,1);}

L'effet d'affichage est comme indiqué sur l'image, avec une transparence différente de chaque côté. Lorsque nous devons définir la transparence de la bordure, remplissez simplement la dernière valeur comprise entre 0 et 1 selon vos besoins.

Partage de vidéos d'apprentissage : tutoriel vidéo CSS

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!