Grenzen sind im Webdesign/-entwicklung von entscheidender Bedeutung, da sie die Aufmerksamkeit auf Benutzer lenken oder Inhalte auf einer Webseite trennen können. Sie können das Rahmenkürzel verwenden, wenn alle vier Rahmen eines HTML-Elements gleich sein sollen.
Andererseits können Sie auch die Langhand-Eigenschaften Rahmenfarbe, Rahmenstil und Rahmenbreite verwenden, um jeden Rahmen anders/einzigartig zu machen. Wenn Sie die Farbe des Rahmens angeben möchten, verwenden wir die Rahmenfarbe, verwenden die Rahmenbreite, um die Breite des Rahmens zu bestimmen, und geben an, ob ein Rahmen gestrichelt, doppelt oder durchgezogen ist, indem Sie die Eigenschaft border-style verwenden.
Sie können auch auf einzelne Grenzen abzielen, indem Sie Eigenschaften wie border-block-start und border-top verwenden
Ein doppelter Rahmen liegt vor, wenn zwei parallele Linien ein HTML-Element umgeben. Die beiden Linien sind durch eine Lücke getrennt, die transparent gelassen oder mit einem Bild oder einer Hintergrundfarbe gefüllt werden kann.
Zum Beispiel können wir einen Anmelde-/Login-Button haben, der von einer doppelten Umrandung umgeben ist.
Inhaltsverzeichnis
Warum Doppelrand?
- Trennung: Sie können einen doppelten Rahmen verwenden, um die Lesbarkeit und Durchsuchbarkeit einer Webseite zu erhöhen, indem Sie verschiedene HTML-Elemente trennen. Sie können beispielsweise doppelte Rahmen haben, um Elemente wie Kopf-, Haupt- und Fußzeilen auf einer Webseite zu trennen.
- Visuelle Attraktivität: Sie können verschiedene/kontrastierende Farben an den doppelten Rändern verwenden, um verschiedene Elemente optisch ansprechender zu gestalten.
- Hierarchie anzeigen: Mit doppelten Rahmen können Sie wichtige und weniger wichtige Elemente auf einer Webseite deutlich voneinander unterscheiden.
- Einfache Anpassung: Mit Hilfe von doppelten Rändern können Sie personalisierte und einzigartige Designs erstellen. Sie können beispielsweise die Farbe oder Breite jeder Linie ändern.
- Hervorhebung: Mit der Eigenschaft Doppelter Rahmen können Sie auf bestimmte Links oder Schaltflächen auf einer Webseite aufmerksam machen.
Sie können die folgenden Methoden verwenden, um den doppelten Rahmen in CSS zu erstellen.
Border-Style-Eigenschaft verwenden
Die Eigenschaft border-style legt den Stil der vier Rahmen eines Elements fest. Wir verwenden in diesem Fall das Schlüsselwort double, um den Stil festzulegen. Wenn wir das Schlüsselwort double verwenden, wird zwischen den beiden Rändern automatisch aufgefüllt.
Zu Demonstrationszwecken setzen wir die Rahmenbreite auf 15 Pixel. Wir wählen auch unsere Rahmenfarbe rot und geben den Rahmenstil als doppelt an.
HTML Quelltext:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
CSS-Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
Die Ausgabe wird sein:
Verwendung der Funktion linear-gradient()
Diese Funktion setzt einen linearen Farbverlauf als Hintergrundbild. Das Ergebnis ist ein allmählicher Übergang zwischen zwei Farben entlang einer geraden Linie. Wir verwenden das Schlüsselwort to, um den Startpunkt der Gradientenlinie zu markieren. Wenn die Reihenfolge nicht angegeben ist, ist der Standardwert unten.
Der folgende Code gibt unserer Box eine Rahmenbreite von 7 Pixel. Wir können dann den linearen Farbverlauf in der Hintergrundeigenschaft jeder Seite der Box angeben.
HTML Quelltext:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
CSS-Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
Die Ausgabe wird sein:
Outline-Eigenschaft verwenden
Ein Umriss ist eine Linie, die außerhalb der Umrandung eines Elements gezogen wird. Dadurch wird der Doppelrandeffekt erzielt, und wir können einen Umriss und einen einzelnen Rand verwenden. Wir müssen outline-offset verwenden, um ein Leerzeichen zwischen den Eigenschaften border und outline hinzuzufügen.
HTML Quelltext:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
CSS-Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
Die gerenderte Seite wird wie folgt angezeigt:
Box-Shadow-Eigenschaft verwenden
Die Eigenschaft box-shadow fügt einen Schatteneffekt um den Rahmen eines Elements hinzu. Sie können mehrere Box-Shadow-Effekte haben, die durch Kommas getrennt sind. Stellen Sie zunächst sicher, dass die Offset- und Weichzeichnungseinstellungen Null sind, und stellen Sie dann die Schatten auf die richtige Größe ein.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
CSS-Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
Die gerenderte Seite wird wie folgt angezeigt:
Verwendung der background-clip-Eigenschaft
Die Eigenschaft background-clip bestimmt, wie weit sich der Hintergrund innerhalb eines Elements erstrecken soll. Die Erweiterung kann sich auf der Border-Box, Padding-Box oder Content-Box befinden.
HTML Quelltext:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
CSS-Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
Die gerenderte Seite wird wie folgt angezeigt:
Verwendung von Pseudoelementen
Pseudo-Elemente, dargestellt durch ::before- und ::after-Selektoren, ermöglichen es Webdesignern, Teile eines HTML-Dokuments zu stylen, ohne Markup zum Code hinzuzufügen.
Mit diesem Code können wir veranschaulichen, wie Pseudoelemente verwendet werden, um einen doppelten Rahmen zu erstellen:
HTML-Dokument
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
Die gerenderte Seite wird wie folgt angezeigt:
Beispiele aus der Praxis für Double-Border-CSS
Die CSS-Eigenschaft Double Border wird auf vielen Websites verwendet. Sie müssen die Double Border-Eigenschaft mit anderen CSS-Eigenschaften kombinieren, um das Beste daraus zu machen. Das Folgende sind zwei Beispiele für den doppelten Rand in Aktion;
Der „Warenkorb“-Button bei Amazon
Amazon ist einer der größten Namen im E-Commerce-Bereich. Der Warenkorb-Button hat ein doppelt umrandetes CSS für visuelle Ästhetik und fordert Benutzer zum Handeln auf.
Die doppelten Rahmen erscheinen, wenn ein Benutzer mit der Maus über die Schaltfläche „Einkaufswagen“ fährt. Die Grenzen sind auch sichtbar, wenn Sie mit der Maus über das Navigationsmenü von Amazon fahren.
Mailchimp-Schaltflächen
Mailchimp ist ein E-Mail-Marketingdienst, mit dem Benutzer Kampagnen erstellen, starten und verfolgen können. Seine Website verwendet Doppelrandeffekte in verschiedenen Abschnitten. Die Anmelde- und Login-Schaltflächen haben doppelte Umrandungen, um beim Durchsuchen ein Gefühl der Dringlichkeit zu „erzeugen“.
Der Rand auf der unteren Seite dieser Schaltflächen wird dicker, wenn ein Benutzer einen Cursor durch sie hindurchbewegt.
Best Practices bei der Verwendung des CSS-Effekts mit doppeltem Rahmen
Es ist leicht, sich hinreißen zu lassen, wenn Sie doppeltes CSS verwenden. Das Endziel besteht darin, sicherzustellen, dass Benutzer einfach navigieren und die Hauptbereiche auf Ihrer Website hervorheben. Befolgen Sie diese Best Practices:
- Verwenden Sie einen konsistenten Stil: Wenn Sie doppelte Rahmen verwenden, stellen Sie sicher, dass der Stil für alle Elemente konsistent ist. Beispielsweise können doppelte Rahmen für die Navigations-, Call-to-Action- und Registrierungs-/Login-Schaltflächen verwendet werden. Achten Sie möglichst auf gleiche Farben und Randstärken bei Elementen mit doppeltem Rand.
- Stellen Sie sicher, dass diese doppelten Grenzen auf verschiedenen Geräten funktionieren: Wir leben in einer Welt, in der Menschen Websites von Smartphones, PCs und Tablets aus durchsuchen. Testen Sie, um sicherzustellen, dass doppelte Rahmen wie erwartet auf verschiedenen Bildschirmgrößen angezeigt werden.
- Verwenden Sie sie sparsam: Sie könnten versucht sein, einen bestimmten CSS-Effekt zu übertreiben, nachdem Sie ihn zum ersten Mal entdeckt haben. Doppeltes CSS passt jedoch zu verschiedenen Elementen auf einer Webseite. Verwenden Sie diese Eigenschaft nur in Bereichen, in denen sie das Design aufwertet.
Abschluss
Wir haben die wichtigsten Ansätze hervorgehoben, die Sie verwenden können, um einen doppelten Rahmen in CSS zu erstellen. Die Wahl des Ansatzes hängt davon ab, was Sie mit dem doppelten Rand erreichen möchten, und von Ihren Vorlieben. Sie können sich für einen oder eine Kombination mehrerer Doppelrandstile auf derselben Seite entscheiden.
Sie können sich diese CSS-Ressourcen ansehen, um Cascading Style Sheets im Detail zu verstehen.