Beispielcode zur Realisierung eines Reliefeffekts mithilfe von CSS

Dieser Artikel stellt hauptsächlich vor, wie man CSS verwendet, um den Reliefeffekt zu erzielen. Ich glaube, er hat einen gewissen Referenzwert für alle, die daran interessiert sind.

Vorwort

Ich habe kürzlich einen Effekt gesehen, als ich mir Baidu Maps angesehen habe. Ich hatte das Gefühl, dass dieser Effekt ziemlich gut wäre, wenn er auf einer Webseite verwendet würde, 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 Obiger Code:

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

Fügen Sie den von Ihnen erzielten Effekt hinzu :

Ein sehr praktischer Effekt

Flex-Stilanalyse:

display:-webkit-flex bietet a Teleskopbox Container

-webkit-align-items:

flex-start: Die Grenze der Startposition der Querachse (vertikale Achse) des Flexbox-Elements liegt nahe am Start Rand der Querachse der Zeile.

Flex-Ende: Die Grenze der Startposition der Querachse (vertikale Achse) des Flex-Box-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 Platz für untergeordnete Elemente des Flexbox-Modellobjekts zugewiesen wird.

none:

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

[ flex-grow ]: Definition Das Ausdehnungsverhältnis des Flexbox-Elements. (Platzzuteilungsrechte definieren)

[flex-shrink]: Definieren Sie das Schrumpfverhä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

Nutzen Sie CSS stärker. Bitte beachten Sie die PHP-Chinese-Website für verwandte Artikel zum Beispielcode, um den Erleichterungseffekt zu erzielen!