Lassen Sie uns über einige interessante CSS-Themen sprechen (1) – So implementieren Sie die vertikale Leiste auf der linken Seite

Dies ist die erste Reihe, in der einige interessante CSS-Themen besprochen werden. Abgesehen von der praktischen Anwendbarkeit sollen einige Themen die Ideen zur Lösung von Problemen erweitern. Darüber hinaus beinhalten sie einige CSS-Details, die leicht übersehen werden.

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

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

Fassen Sie es in meinem Github zusammen und veröffentlichen Sie es im Blog, in der Hoffnung, weitere Lösungen zu erhalten.

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

Angenommen, unser einzelnes Tag ist ein div:

<div></div>

ist definiert als das folgende generische CSS:

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

Methode 1: Rand

Das sollte die einfachste und einfachste Sache sein, die man sich vorstellen kann

div{
    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.

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

Methode drei: äußerer Kastenschatten

Box Shadow box-shadow Die meisten Leute verwenden nur generierte Schatten. Tatsächlich können Schatten 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 Probleme zu lösen

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

Methode 4: Innerer Kastenschatten

Der Boxschatten hat auch einen Parameter inset, der zum Festlegen des inneren Schattens verwendet wird. Er kann auch vervollständigt werden:

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

Methode 5: Schlagschatten

drop-shadow ist einer der neuen Filter in CSS3 filter Er kann auch Schatten erzeugen, hat aber nur 3 numerische Parameter, einen weniger als Box-Shadow.

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

Methode 6: Gradient linearGradient

Durch die flexible Verwendung von CSS3-Verläufen können viele unerwartete Grafiken erstellt werden. CSS3-Verläufe werden in lineare Verläufe und radiale Verläufe unterteilt. Diese Frage verwendet lineare Verläufe und kann leicht gelöst werden:

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

Methode 7: Gliederung skizzieren

Dies wird selten verwendet. Umriss ist eine Linie, die um ein Element herum gezeichnet wird. Sie befindet sich außerhalb des Randes und kann das Element hervorheben. Diese Methode gilt als die nächstbeste Option.

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

F8, Bildlaufleiste

Diese Methode wird von Little Match’s Blue Ideal bereitgestellt und durch Ändern des Bildlaufleistenstils implementiert:

div{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
div::-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 andere gibt, an die ich nicht gedacht habe. Sie können hier klicken um die spezifischen 8 Implementierungen zu sehen:

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

Alle Fragen sind in meinem Github zusammengefasst und im Blog gepostet, in der Hoffnung, weitere Lösungen zu erhalten.

Dies ist das Ende dieses Artikels, wenn Sie noch Fragen oder Anregungen haben. Es handelt sich um einen originellen Artikel und das Wissen ist oberflächlich im Artikel, lassen Sie es mich bitte wissen.