Verwenden Sie CSS, um einen Reliefeffekt zu erzielen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von CSS zur Erzielung des Linderungseffekts vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

Ich habe kürzlich beim Betrachten von Baidu Maps einen Effekt gesehen, der bei der Verwendung auf Webseiten recht gut sein sollte, also habe ich ihn studiert.

Die Darstellung ist wie folgt:

Der Reliefeffekt erfordert Kenntnisse über den Teleskopkasten (Flex)

flex Es wird in Chrome vollständig unterstützt. Einige andere Browser unterstützen es, andere nicht. Heute möchte ich hauptsächlich darüber sprechen, wie man den Reliefeffekt erstellt >

Zuerst angehängt Laden Sie den Code hoch:

<p class="title">
        <p class="word">生活服务</p>
        <p class="relief">
            <p class="border"></p>
        </p>
    </p>

body,p{
     padding: 0;
     margin: 0;
 }
.title{
    font-size: 15px;
    font-family: "Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display: -webkit-flex;
    -webkit-align-items: center;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.word{
    -webkit-flex: 0 0 auto;
    padding-right: 10px;
}
.relief{
    -webkit-flex: 1;
}
.border{
    height: 0;
    width: 100%;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

und hängen Sie den von Ihnen erstellten Effekt an:

Ein sehr praktischer Effekt

Flex-Stilanalyse:

display:-webkit-flex Stellt einen Container für die Flex-Box bereit

-webkit-align-items:

Flex-Start: Der Rand der Querachsen-(vertikalen) Startposition des Flexbox-Elements liegt nahe am Querachsen-Startrand der Zeile.

Flex-Ende: Die Grenze der Startposition der Querachse (vertikale Achse) des Flexbox-Elements liegt nahe an der Endgrenze der Querachse der Reihe.

Mitte: Das Flexbox-Element ist auf der Querachse (vertikale Achse) der Reihe zentriert. (Wenn die Größe der Zeile kleiner als die Größe des Flexbox-Elements ist, überläuft es in beide Richtungen die gleiche Länge).

-webkit-flex: Zusammengesetztes Attribut. Legt fest oder ruft ab, wie die untergeordneten Elemente des

Flexbox-Modells-Objekts Platz zuweisen.

none:

Der berechnete Wert des Schlüsselworts „none“ ist: 0 0 auto

[ flex-grow ]: Definiert das Erweiterungsverhältnis des Flexbox-Element. (Platzzuweisungsrechte definieren)

[flex-shrink]: Definieren Sie das Schrumpfungsverhältnis des Flex-Box-Elements. (Wenn es überläuft, wird der zusätzliche Platz proportional verdaut)

[flex-basis]: Definiert den Standardbasiswert des Flex-Box-Elements. (Definieren Sie den Breitenwert des Elements. Wenn nicht angegeben, hängt er vom Breitenwert des Elements selbst ab)

Legen Sie abschließend das Randattribut im Rahmen fest, um die Erzeugung des Reliefeffekts abzuschließen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

CSS, um das Symbol zu drehen, wenn die Maus nach oben bewegt wird

Verwendung von CSS3, um ein leuchtendes Quadrat zu implementieren Grenze

Verwendung von CSS3, um einen nahtlosen Endlosschleifen-Scrolleffekt zu erzielen

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um einen Reliefeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!