Verwenden Sie CSS, um ein Datei-Upload-Muster zu zeichnen

Wenn Sie es wären, wie würden Sie es erreichen, wie unten gezeigt:

Normalerweise verwenden wir Schriftsymbole, um das Pluszeichen in der Mitte anzuzeigen, und umschließen es außen mit einem Div. Oder wir verwenden Pseudoelemente, um die horizontalen und vertikalen Linien in der Mitte zu simulieren, was problematischer ist.

Tatsächlich können wir Div+CSS direkt verwenden, um dies zu erreichen.

Gliederung

Bei der Gliederungseigenschaft handelt es sich um eine Abkürzungseigenschaft, mit der Sie beispielsweise eine oder mehrere einzelne Gliederungseigenschaften festlegen können.

Eine Kontur hat folgende Eigenschaften:

{
    Umrissstil: durchgezogen;
    Umrissbreite: 10px;
    Umrissfarbe: rot;
}

Sie haben eine Kurzform:

{
    Umriss: 10px durchgehend rot;
}

Merkmale der Gliederung

Gliederungen nehmen keinen Platz ein, sie werden über den Inhalt gezeichnet.

Sie können folgenden Effekt erzielen:

Ich habe festgestellt, dass, wenn Outline-Offset auf einen negativen Wert gesetzt wird, die Kontur innerhalb des Div angezeigt wird. Wenn Sie den negativen Wert weiter vergrößern, wird die Kontur schließlich zu einem Pluszeichen „➕“ verkleinert, das als Pluszeichen in der Mitte des Datei-Upload-Stils verwendet werden kann.

Das ist interessant, also hier kommt der Code:

div {
    Rand: 100px;
    Breite: 100px;
    Höhe: 100px;
    Umriss: 15px durchgezogen #545454;
    Umriss-Offset: -66px;
    Rand: 2px durchgezogen #545454;
}

Umriss-Offset: -66px; ist der Schlüssel, er stellt den Abstand des Umrisses vom Rand des Div dar. Wenn es ein negativer Wert ist, schrumpft es nach innen und bildet schließlich ein Pluszeichen. Die jeweils hochgeladene Stilgröße und Umrissbreite müssen Sie langsam selbst anpassen, um Harmonie zu erreichen.

Es ist zu beachten, dass:

Der Behälter muss quadratisch sein

Die Breite des Umrisses selbst darf nicht zu klein sein

Ursprüngliche GitHub-Repository-Adresse: https://github.com/Daotin/front-end-notes/issues

Zusammenfassen

Oben habe ich Ihnen die Verwendung von CSS zum Zeichnen eines Datei-Upload-Musters vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!