Schritt 3: Dekorieren Sie mit CSS
Zu diesem Zeitpunkt wird der Lader nichts mehr als nur das Bild aussehen, die wir eingefügt. Jetzt werden wir einige Charme hinzufügen mithilfe von CSS. Innerhalb des Style-Tags im Head-Tag geben wir in den CSS-Deklarationen für das Div, Körper und Img -Tag.
body { font-family: sans-serif; background-color: #ededed; overflow: hidden; } div { box-shadow: 5px 5px 100px black; border-radius: 360px; width: 250px; height: 250px; background-color: white; position: relative; margin-top: 150px; border: 50px solid white; z-index: 2; } img { margin-left: -15px; margin-top: 15px; }
Stellen Sie sicher, dass Überlauf: versteckte eingetippt. Andernfalls verursacht der langen Reihe von Stellen von Pi eine horizontale Bildlaufleiste erstellt werden. Überlauf: versteckte im Grunde bedeutet, dass die zusätzliche Inhalte, die nicht in den Bildschirm passt aus abgeschnitten wird.
Box-Shadow ermöglicht es uns, das Div -Element einen Schatten hinzufügen. Hier ist der Schatten 5 Pixel lang und breit und in einem Abstand von 100 Pixel verblasst.
Die Border-Radius -Eigenschaft gibt eine abgerundete Kante auf unsere Div -Element. Da die Höhe und Breite hier gleich sind, bilden die Grenzen einen perfekten Kreis.
Die Margin-Top Immobilien senkt das Div x 150 Pixel. Füllen Sie auch einen festen weißen Rand 50 Pixel breit in den Behälter. Schließlich legen Sie die Container eine Einheit höher mit der Z-Index -Eigenschaft. (Der Standardwert ist 1.)
Sie müssen die Margin -Eigenschaft verwenden, um das Bild innerhalb des Containers zu zentrieren. Ich fand - 15px und 15px komfortabel. Dieser Wert variiert mit dem Bild, die, das Sie verwenden.