Wie erstelle ich einen cool gepunkteten Box -Effekt von Upload -Tasten mit CSS allein?

Pure CSS erstellt einen cool gepunkteten Box -Effekt von Upload -Tasten! Verabschieden Sie sich von Bildern und JavaScript, Sie können es mit nur CSS -Code erreichen! In diesem Artikel wird demonstriert, wie CSS -lineare Gradienten verwendet werden, um einen eindeutigen Upload -Schaltfläche zu erstellen. Der Effekt wird wie im Beispielbild gezeigt.

Viele Entwickler möchten einen attraktiveren Look für Upload -Tasten entwerfen. Traditionelle Methoden beruhen normalerweise auf Bilder oder komplexen JavaScript -Code. Tatsächlich können wir jedoch leicht ähnliche Effekte erzielen, indem wir die linear-gradient von CSS geschickt anwenden.

Das Geheimnis ist, zwei lineare Gradienten geschickt zu überlagern. Durch Einstellen der Gradientenrichtung, Größe und Wiederholung können wir den visuellen Effekt des gepunkteten Rahmens simulieren. Der folgende CSS -Code zeigt die spezifische Implementierung:

 Etikett {
  Anzeige: Block;
  Breite: 80px;
  Höhe: 80px;
  Grenze: 1PX gestrichelt #CCC;
  Hintergrund: Linear-Gradient (#CCC, #CCC) Center/40px 4px No-Repeat,
              Linear-Gradient (#CCC, #CCC) Center/4px 40px No-Repeat;
}

Code -Interpretation:

• width und height definieren die Knopfgröße.
• border Grenzeigenschaften setzt die gepunktete Grenze.
• background Hintergrundeigenschaft ist der Kern, der zwei lineare Gradienten überlagert:
  • linear-gradient(#ccc, #ccc) center/40px 4px no-repeat : Erstellen Sie eine kurze gepunktete Linie in horizontaler Richtung.
  • linear-gradient(#ccc, #ccc) center/4px 40px no-repeat : Erstellen Sie eine kurze gepunktete Linie in vertikaler Richtung. Die beiden kombinieren zu einem gitterartigen gepunkteten Rahmen.
  • center/40px 4px und center/4px 40px steuern Sie die Größe und Position des Gradienten und steuern so die Länge und Abstand der gepunkteten Linien genau.

Sie können width , height und Farbwerte (z. B. #ccc ) nach Bedarf einstellen, um die Knopfgröße und das Aussehen anzupassen. Durch das Modifizieren des Parameters linear-gradient können Sie den gepunkteten Linieneffekt weiter fein abteilen, z. B. die Dicke und den Abstand der gepunkteten Linie einstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen cool gepunkteten Box -Effekt von Upload -Tasten mit CSS allein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!