Gradientengrenzen - CSS

Die Verwendung intuitiver Farben im Webdesign kann dazu beitragen, die Aufmerksamkeit des Benutzers zu erregen. In Webanwendungen können verschiedene Farbmethoden verwendet werden. Gradientenfarben sind bedeutend und attraktiv, weil sie verschiedene Farben kombinieren, um mehr Farbtöne zu erzeugen. Es gibt keine bestimmten CSS -Eigenschaften, um Gradientengrenzen rund um das Element zu verleihen. Einige andere Eigenschaften helfen uns jedoch in diesem Zusammenhang.

In diesem Beitrag wird beschrieben, wie die Gradientengrenzen in CSS angewendet werden können.

So wenden Sie Gradientengrenzen in CSS an?

Wir haben die Methoden zur Anwendung der Gradientengrenzen um das HTML -Element aufgelistet:

• Methode 1: Fügen Sie den Gradientenrand um das Element mit CSS hinzuGrenzbild" Eigentum
• Methode 2: Fügen Sie den Gradientenrand um das Element mit CSS hinzuPolsterung" Eigentum

Bevor Sie in die oben genannten Methoden einsteigen, erstellen wir zunächst eine HTML-Seite.

Voraussetzung

Befolgen Sie die Anweisungen, um eine HTML -Seite zu erstellen:

• Füge hinzu ein ""Element und zuweisen Sie ihm eine Klasse"hauptsächlich”.
• Fügen Sie in diesem Element ein weiteres „“ Element hinzu, um ein Bild zu platzieren. Setzen Sie seine Klasse als "Bild”. Dieses Div -Element enthält das “"Tag mit den Attributen" SRC "," Alt "und" Breite ".
• Der "srcAttribut gibt die URL des Bildes an.
• Der "Alt”Attribut definiert einen Text, der auf dem Bildschirm angezeigt wird, wenn das Bild nicht geladen werden kann.
• Der "Breite”Bestimmt die Breite des Bildes.

Hier ist der HTML -Code:

Wenden wir auf der HTML -Seite ein CSS -Styling an.

Stil „“ Element

Das Div -Element mit Klasse “hauptsächlich”Wird mit den folgenden CSS -Eigenschaften gestaltet:

.hauptsächlich
Breite: 350px;
Höhe: 230px;
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;
Rand: Auto;

Die Beschreibung des oben genannten Codes ist unten aufgeführt:

• “Breite”Passt die Breite des Elements an.
• “Höhe”Bestimmt die Größe des Elements.
• “AnzeigeEigenschaft definiert das Anzeigverhalten des Elements. Der Wert "biegen”Macht das Elementlayout flexibel.
• “RechtfertigungsbekämpfungEigenschaften richten die flexiblen Gegenstände horizontal aus.
• “Ausrichtung”Richtet die flexiblen Gegenstände vertikal aus.
• “Rand”Fügt Platz um das Element hinzu.

Es kann beobachtet werden, dass das Bild erfolgreich an die Webseite angepasst wird:

Methode 1: Fügen Sie Gradientengrenze um das Element mit CSS „Grenzmaterial“ -Mobilie hinzu

Jetzt im laufenden Beispiel das CSS “GrenzbildEigenschaften werden verwendet, um Gradienten zu erzeugen. Fügen Sie in CSS die folgenden Eigenschaften zum Div mit der Klasse hinzu “.hauptsächlich”:

Grenze: 5px fest transparent;
Grenzbild: Lineargradient (40de, RGB (19, 29, 163), RGB (138, 211, 253)) 1;

Unten finden Sie die Erklärung der oben genannten Eigenschaften:

• “GrenzeIst ein Kurzeigeneignis, das einen Rand um das Element anwendet, indem die Breite, der Stil und die Farbe des Randes angegeben werden.
• “Grenzbild”Wird der Wert zugewiesen“linear-Gradient ()Funktionen, die ein Bild mit mehreren Farben erzeugt, die in eine bestimmte Richtung voranschreiten. Diese Funktion enthält einige Parameter. Der erste Wert repräsentiert die “Winkel"Zu den Gradienten wird der Start und Ende des Gradienten durch die beiden angegeben."Farbe" Werte. Am Ende wird die Deckkraft definiert.

Das folgende Bild zeigt, dass der Gradientengrenze erfolgreich um das Bild angewendet wurde:

Methode 2: Fügen Sie Gradient Rand um das Element mit der CSS -Padding -Eigenschaft hinzu

Um das Gradientenelement hinzuzufügen, sind die beiden CSS -Eigenschaften, die wichtiger sind, nachstehend aufgeführt:

• Der "hauptsächlich"Div wird mit dem" gestaltet "Hintergrund”Eigenschaft mit dem Wert als zugewiesen als“linear-Gradient ()”Funktion.
• Der Div -Behälter hat eine “Bild"Klasse wird zugewiesen"Polsterung„Eigentum, um Platz um die“ zu produzieren “" Element. Dadurch wird es einfacher, den Gradientenhintergrund der zu erkennenhauptsächlich”Klasse von Div als Bildrand.

Lassen Sie uns diese beiden Punkte implementieren.

Stil „Haupt“ -Klasse

.hauptsächlich
Breite: 380px;
Hintergrund: Linear-Gradient (nach rechts, RGB (17, 17, 17), RGB (184, 178, 178), RGBA (141, 19, 86, 0).857));
Rand: Auto;
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;

Der ".hauptsächlich"Wird verwendet, um auf das DIV -Element mit Klasse zuzugreifen"hauptsächlich”. Die folgenden Eigenschaften werden darauf angewendet:

• “HintergrundEigenschaft wird als Wert eine Funktion „linear-Gradient ()“ zugewiesen. Es hat mehrere Parameter. Der erste Wert repräsentiert die Gradientenrichtung. Die anderen drei Parameter repräsentieren die Gradientenfarben.

Stil „Bild“ div

.Bild
Polsterung: 10px;

Das CSS “Polsterung"Eigenschaft wird auf den Div -Container mit Klasse angewendet"Bild”. Diese Eigenschaft wird Platz um ihren Inhalt schaffen. In unserem Fall haben wir das Bild eingebettet.

Der Gradientenrand um das Bild ist in der folgenden Ausgabe dargestellt:

Wir haben die Methoden gelernt, um die Gradientengrenzen mit CSS um die Elemente anzuwenden.

Abschluss

In CSS, die “GrenzbildEigenschaft mit dem Wert zugewiesen als "linear-Gradient ()Die Funktion wird verwendet, um Gradientengrenzen rund um das Element hinzuzufügen. Das CSS “Polsterung„Eigentum kann auch hilfreich sein, um den Gradientenhintergrund als Grenze zum Inhalt darzustellen. In diesem Beitrag haben wir gezeigt, wie sie mit CSS Gradientengrenzen um die Elemente anwenden können.