Code der CSS-Implementierungsmethode in der linken vertikalen Leiste

Kompatibilität wird bei der Lösung von Problemen nicht berücksichtigt. Sagen Sie einfach, was Ihnen bei der Problemlösung nicht vertraut ist .

Aktualisieren Sie weiter, aktualisieren Sie weiter, aktualisieren Sie weiter, sagen Sie wichtige Dinge dreimal.

Frage 1. Auf wie viele Arten kann die folgende Grafik mit nur einer Beschriftung implementiert werden:

Angenommen, unser einzelnes Tag ist eine p:

<p></p>

, die wie folgt definiert ist: allgemein CSS:

p{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

Methode 1: Rand

Das sollte am einfachsten zu denken sein

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

Methode 2: Pseudoelemente verwenden

ist ein Etikett, das aus before und after Pseudoelementen besteht. Dies ist auch die Grundlage für viele Einzeletikettenzeichnungen Pseudoelemente.

p::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

Methode 3: Äußerer Kastenschatten

Kastenschatten box-shadow Die meisten Leute verwenden nur generierte Schatten kann mehrere Schatten haben und Schatten können nicht verwischt werden. Dies erfordert das Verständnis der spezifischen Funktionen jedes Parameters von box-shaodw. Verwenden Sie box-shaodw, um das Problem zu lösen

p{
    box-shadow:-5px 0px 0 0 deeppink;
}

Methode 4: Innerer Kastenschatten

Der Kastenschatten hat auch einen Parameter inset, Wird zum Festlegen des inneren Schattens verwendet und kann auch wie folgt ausgeführt werden:

p{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

Methode 5: Schlagschatten

drop-shadow ist neu in CSS3. Einer der Filter in Filter filter kann auch Schatten erzeugen, hat aber nur 3 numerische Parameter, einen weniger als box-shadow.

p{
    filter:drop-shadow(-5px 0 0 deeppink);
}

Methode 6: Gradient linearGradient

Durch die flexible Verwendung von CSS3-Verläufen können viele unerwartete CSS3-Verläufe unterteilt werden in linearen Farbverlauf und radialen Farbverlauf umwandeln, der leicht gelöst werden kann:

p{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

Methode 7: Gliederung

Dies wird relativ selten verwendet. Umriss (Umriss) ist eine Linie, die um das Element herum gezeichnet wird und sich außerhalb des Randes des Rahmens befindet und bei der Hervorhebung des Elements eine Rolle spielen kann. Diese Methode gilt als die nächstbeste Option.

p{
    height:50px;
    outline:5px solid deeppink;
}
p::after{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

Methode 8, Bildlaufleiste

Diese Methode wird durch das blaue Ideal von Little Match bereitgestellt und durch Ändern der implementiert Bildlaufleistenstil:

p{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
p::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

Abgesehen von der Praktikabilität ist diese Methode wirklich ein Hingucker, wenn Sie diesen Stil nur simulieren.

Die oben genannten 8 Methoden fallen mir ein. Es ist nicht ausgeschlossen, dass es in den Kommentaren noch andere Methoden gibt Klicken Sie hier, um die spezifischen 8 Implementierungen anzuzeigen:

Codepen-Implementierung des vertikalen Balkens auf der linken Seite eines einzelnen Etiketts

Das obige ist der detaillierte Inhalt vonCode der CSS-Implementierungsmethode in der linken vertikalen Leiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!