Maison > Article > interface Web > Code de méthode d'implémentation de la barre verticale gauche CSS
La compatibilité n'est pas prise en compte lors de la résolution de problèmes. Les questions sont sauvages et sans contrainte. Dites simplement ce qui vous vient à l'esprit. S'il y a des propriétés CSS qui ne vous semblent pas familières dans la résolution de problèmes, allez les étudier rapidement. .
Continuez à mettre à jour, continuez à mettre à jour, continuez à mettre à jour, dites des choses importantes trois fois.
Supposons que notre unique balise soit une p
:
<p></p>
définie comme suit : général CSS
:
p{ position:relative; width:200px; height:60px; background:#ddd; }
Cela devrait être le plus simple à penser
p{ border-left:5px solid deeppink; }
est une étiquette Comptant before
et after
pseudo-éléments, il a en fait trois étiquettes. C'est aussi la base de nombreux dessins à étiquette unique. Dans cette question, il peut être facilement complété en utilisant. pseudo-éléments.
p::after{ content:""; width:5px; height:60px; position:absolute; top:0; left:0; background:deeppink; }
Ombre de boîte box-shadow
La plupart des gens utilisent simplement des ombres générées. peut avoir plusieurs ombres et les ombres ne peuvent pas être floues. Cela nécessite de comprendre les fonctions spécifiques de chaque paramètre de box-shaodw
. Utilisez box-shaodw
pour résoudre le problème
p{ box-shadow:-5px 0px 0 0 deeppink; }
L'ombre de la boîte a également un paramètre inset
, Utilisé pour définir l'ombre intérieure, il peut également être complété :
p{ box-shadow:inset 5px 0px 0 0 deeppink; }
drop-shadow
est nouveau dans CSS3 L'un des filtres de Filter filter
peut également générer des ombres, mais il n'a que 3 paramètres numériques, un de moins que box-shadow.
p{ filter:drop-shadow(-5px 0 0 deeppink); }
L'utilisation flexible des dégradés CSS3 peut compléter un grand nombre de dégradés CSS3 inattendus. en dégradé linéaire et dégradé radial. Cette question utilise un dégradé linéaire, qui peut être facilement résolu :
p{ background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px); }
Ceci est utilisé Il y en a relativement peu. Le contour (contour) est une ligne tracée autour de l'élément, située à l'extérieur du bord de la bordure, qui peut jouer un rôle dans la mise en évidence de l'élément. Cette méthode est considérée comme la deuxième meilleure option.
p{ height:50px; outline:5px solid deeppink; } p::after{ position:absolute; content:""; top:-5px; bottom:-5px; right:-5px; left:0; background:#ddd; }
Cette méthode est fournie par l'idéal bleu de Little Match, et est implémentée en changeant le style de barre de défilement :
p{ width:205px; background:deeppink; overflow-y:scroll; } p::-webkit-scrollbar{ width: 200px; background-color:#ddd; }
Pratique mise à part, si vous simulez simplement ce style, cette méthode est vraiment accrocheuse.
Ce qui précède sont les 8 méthodes qui me viennent à l'esprit. Il n'est pas exclu qu'il existe des méthodes inattendues. J'espère que d'autres méthodes pourront être proposées dans les commentaires. cliquez ici pour voir les 8 implémentations spécifiques :
codepen-implémentation de la barre verticale sur le côté gauche d'une seule étiquette
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!