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.

Question 1. De combien de façons le graphique suivant peut-il être implémenté en utilisant une seule étiquette :

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;
}

Méthode 1 : bordure

Cela devrait être le plus simple à penser

p{
    border-left:5px solid deeppink;
}

Méthode 2 : Utiliser des pseudo-éléments

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;
}

Méthode 3 : Ombre de boîte extérieure

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;
}

Méthode 4 : ombre de la boîte intérieure

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;
}

Méthode 5 : ombre portée

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);
}

Méthode 6 : Dégradé linéaireGradient

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);
}

Méthode 7 : Aperçu

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;
}

Méthode 8, barre de défilement

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!