Heim >Web-Frontend >CSS-Tutorial >Was wir mit den Kastenschatten machen
Was wir mit den Kastenschatten machen
- Linda HamiltonOriginal
- 2024-12-29 14:29:11817Durchsuche
Ab und zu bekomme ich eine „CSS-Phase“. Die letzte begann, als ich CSSBattle entdeckte. Diese Website stellt täglich vor Herausforderungen, bei denen Sie ein Bild mit CSS mit möglichst wenig Zeichen reproduzieren müssen. Ich bin schrecklich, extrem wortreich, aber ich muss sagen, ich war besessen.
Eine meiner Lieblingsbeschäftigungen ist es, mir die Lösungen anderer Leute anzuschauen, und so habe ich herausgefunden, dass meine anderen CSS-Kämpferkollegen dort häufig Box-Shadow verwenden, und dann wurde ich super neugierig darauf. Sie nutzen diese Eigenschaft grundsätzlich, um ein Reangle für immer und ewig zu reproduzieren. Ich zeige wie.
Die Box-Shadow-Eigenschaft
Laut der Dokumentation gibt es viele Vereinbarungen für diese Immobilie. Aber die Farbe, die wir hier verwenden, ist die Farbe oben links. Also zum Beispiel:
(CSSBattle-Tagesziel für den 16.11.2024)
In diesem Bild sehen wir nur ein Div; die anderen sind Schatten. Der HTML-Code lautet also:
<html>
<body>
<div></div>
</body>
</html>
Das CSS lautet:
* {
background: #6592CF;
position: absolute;
}
div {
top: 52px;
left: 52px;
width: 70px;
height: 30px;
background: #EEB850;
box-shadow:
0 75px #243D83, 0 150px #EEB850,
105px 0 #243D83, 210px 0 #EEB850,
105px 75px #EEB850, 210px 75px #243D83,
105px 150px #243D83, 210px 150px #EEB850;
}
Beachten Sie, dass die oberen und linken Eigenschaften in Pixel angegeben sind und die Abstände relativ zum ersten sind.
Vielleicht bin ich der Einzige, aber ich finde das sehr interessant. Ich werde mein CSS-Studium fortsetzen und lasse Sie, wenn ich andere coole Dinge finde.
Das obige ist der detaillierte Inhalt vonWas wir mit den Kastenschatten machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!