Benutzer können mehrere CSS -Eigenschaften anwenden, um Webseiten attraktiv zu machen wie “Höhe","Breite","Textausrichtung","Grenzstil","Grenzradius", Und "Polsterung”. Genauer gesagt das “GrenzeEigentum fügt den Rand um das Element um. Darüber hinaus möchte der Benutzer möglicherweise einen transparenten Rand um das Element hinzufügen, um die Dinge hinter den Objekten sichtbarer zu machen. Der "Grenze”Attribut mit dem“RGBADer Wert wird dann verwendet, um die Opazität des Randes festzulegen.

Dieser Beitrag erklärt die Methode, um mit Hilfe von CSS -Eigenschaften einen transparenten Rand zu erstellen.

Wie man eine transparente Grenze zu CSS macht?

Probieren Sie das angegebene Verfahren aus, um eine transparente Grenze zu CSS zu machen.

Schritt 1: Erstellen Sie einen DIV -Behälter

Erstellen Sie zuerst eine “Behälter im HTML -Körper. Fügen Sie im Element ein Klassenattribut hinzu.

Schritt 2: Überschrift hinzufügen

Als nächstes fügen Sie eine Überschrift mit Hilfe des "

Tag und verwenden Sie die “ausrichten”Attribut, um die Überschrift in der Mitte des Divs anzugeben. Fügen Sie dann den Text zwischen den hinzugefügten Überschriften -Tags hinzu:

LinuxHint Tutorial Website Ltd UK

Ausgang

Schritt 3: Hintergrundfarbe festlegen

Körper
Hintergrundfarbe: RGB (8, 8, 14);

Greifen Sie hier mit dem Tag des Tags auf den Körper zu und geben Sie die Hintergrundfarbe an, indem Sie die “verwendenHintergrundfarbe" Eigentum.

Schritt 4: Stilübergang mit CSS

H1
Farbe: RGB (23, 83, 5);

Wenden Sie nun das an “anFarbe”Eigenschaft, um den Übergangstext mit dem Tag -Namen zu stylen“H1”.

Schritt 5: Machen Sie feste Grenze

Als nächstes greifen Sie auf die “zu".AußenbezügeKlasse und geben Sie die genannten CSS -Eigenschaften an:

.äußere Inhalt
Grenze: 10px Solid RGB (25, 140, 194);
Breite: 200px;
Höhe: 200px;
Rand: Auto;
Text-Align: Mitte;
Border-Radius: 7px;
Polsterung: 4px;

Hier:

• Der "GrenzeEigenschaft wird verwendet, um einen Rand um ein Element zu schaffen.
• Der "BreiteGibt die Breite des Elements an.
• Der "HöheEigenschaft verteilt die Höhe für den Behälter.
• Der "Rand”Definiert die Weltraum -Außenseite der definierten Grenze.
• “TextausrichtungDie Eigenschaft wird verwendet, um den Text in der Mitte festzulegen.
• “GrenzradiusEigentum rundet die Grenzecke nach dem Wert ab.
• “Polsterung”Gibt den Raum um den Elementinhalt an.

Es ist zu bemerken, dass ein fester Rand um das Element gestellt wurde:

Schritt 6: Grenze transparent machen

Grenze: 10px Solid RGBA (114, 200, 240, 0.3);

Verwenden Sie die “, um die Grenze transparent zu machen, die“Grenze”Eigenschaft und zuweisen den Wert mit dem“RGBA" Farbwähler. Hier geben die ersten drei Werte die RGB -Farbe an, und der vierte Wert legt die Deckkraft des Randes fest. Zum Beispiel wird die Deckkraft als “zugewiesen“0.3”Um die Grenze transparent zu machen:

Ausgang

Dieser Blog hat die Anweisungen zur Erstellung einer transparenten Grenze zu CSS demonstriert.

Abschluss

Um einen transparenten Rand zu CSS zu machen, greifen Sie zunächst mit Hilfe des angegebenen Zugangs auf die DIV zu “Klasse”. Dann verwenden Sie die “GrenzeEigenschaft und setzen Sie die Farbe und Deckkraft des Randes mit der “RGBA" Farbwähler. Wo "RGB”Ist für die rot, grün und blauen Farben und die“A”Wird verwendet, um den Wert der Opazität festzulegen, um den Rand transparent zu machen. In diesem Beitrag wurde das Verfahren erläutert, um die Grenze transparent mit CSS zu machen.