Heim > Artikel > Web-Frontend > Wie spezifiziere ich doppelte Ränder mit CSS?

Wie spezifiziere ich doppelte Ränder mit CSS?

WBOYnach vorne: 2023-09-05 22:45:05872Durchsuche

Wir wissen, dass CSS eine regelbasierte Stylesheet-Sprache ist, die zum Entwerfen und Anpassen von Webseiten verwendet wird. Sie werden verwendet, um festzulegen, wie HTML-Elemente formatiert und auf dem Bildschirm angezeigt werden. Ein Stil, den wir häufig verwenden, besteht darin, den Rand eines Elements hinzuzufügen oder zu ändern. Dies kann durch die Verwendung der CSS-Eigenschaft „border“ erreicht werden.

Grenzeigenschaften

„Rand“ ist eine abgekürzte Methode zur Angabe eines Rahmens um ein Element, indem die Rahmenbreite, der Stil und die Farbe angegeben werden. Daher können wir sagen, dass die Grenzeigenschaft tatsächlich aus den folgenden drei Eigenschaften besteht.

Randfarbe – Legt die Farbe des Randes fest und greift auf die aktuelle Farbe zurück, wenn diese nicht vorhanden ist.
Border-style − Gibt den verwendeten Rahmenstil an und greift auf „none“ zurück, wenn er nicht vorhanden ist.
Border-width – Dies bestimmt die Dicke des Randes, der Standardwert ist „mittel“

Wir können auch die Breite, den Stil und die Farbe jeder Seite der Umrandung individuell festlegen. Beachten Sie, dass es sich nicht um eine vererbbare Eigenschaft handelt. Das heißt, wenn das Containerelement einen Rahmen hat, haben die untergeordneten Elemente keinen Rahmen, sofern nicht anders angegeben.

Wir können den Rahmen mit einer, zwei oder allen drei Eigenschaften festlegen. Jeder Wert, den wir nicht angeben, hat seinen Standard-/Anfangswert als Wert.

Beispiel

Ein Beispiel für einen Rahmen, der alle drei Eigenschaften nutzt, finden Sie unten.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Border and its styling</title>
   <style>
      div {
         width: 100%;
         height: 200px;
         align-content: center;
         justify-content: center;
      }
      #box1 {
         background-color: antiquewhite;
         border: 2px solid black;
      }
      #box2 {
         background-color: aquamarine;
         border: dashed blue;
      }
      #box3 {
         background-color: blanchedalmond;
         border: red;
      }
      #box4 {
         background-color: beige;
         border: 1px rebeccapurple;
      }
   </style>
</head>
<body>
   <div id="box1">Black 2px solid border</div>
   <div id="box2">Blue dashed border</div>
   <div id="box3">No visible border</div>
   <div id="box4">No visible border</div>
</body>
</html>

Wir können sehen, dass jeder Stil einen anderen Effekt auf den Rand des Elements hat.

Geben Sie doppelte Ränder an

Da wir nun die Grundlagen der Verwendung der Border-Eigenschaft in CSS verstanden haben, beginnen wir mit der Lösung der Frage „So spezifizieren Sie einen doppelten Rahmen mithilfe von CSS“. Werfen wir einen kurzen Blick darauf, was die Border-Style-Eigenschaft ist, was Sie damit machen können und wie Sie sie zur Lösung unseres Problems verwenden können.

Geben Sie doppelte Rahmenattribute an

Wir haben oben besprochen, dass das Attribut border-style den Rahmenstil steuert, der auf ein Element in CSS angewendet wird. Das Attribut „border-style“ wird verwendet, um zu steuern, wie Randlinien auf Webseiten angezeigt werden. Dies ist ebenfalls eine Abkürzungseigenschaft, die aus den Stileigenschaften bottom, left, right und top besteht. Wir können das

Border-Style-Attribut

mit einem, zwei, drei oder allen vier Werten angeben.

李>Bei der Angabe von drei Werten wird der erste Stil oben angewendet, der zweite Stil wird auf den linken und rechten Teil angewendet und der letzte Stil wird unten angewendet.

Die chinesische Übersetzung von
lautet:

Beispiel

Im Folgenden finden Sie ein Beispiel für die Angabe eines doppelten Rahmens mithilfe des Attributs „border-style“

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: beige;
         text-align: center;
      }
      h1.doubleApplied {
         border-width: 5px;
         border-style: double;
         Border-color: blue;
      }
      h1.double2Applied {
         border-width: 15px;
         border-style: double;
         Border-color: blue;
      }
      h1.double3Applied {
         border-width: 20px;
         border-style: double;
         Border-color: blue
      }
   </style>
</head>
<body>
   <h1 class="doubleApplied">This has double styled border with thinnest border</h1>
   <h1 class="double2Applied">This has double styled border applied with slightly thick border than previous box.</h1>
   <h1 class="double3Applied">This has double styled border applied with the thickest border</h1>
</body>
</html>

Wir können sehen, dass durch die Verwendung von double als Wert alle Elemente einen doppelten Rand unterschiedlicher Dicke um sich herum haben.

Fazit

Zusammenfassend lässt sich sagen, dass die Angabe doppelter Ränder mithilfe von CSS eine einfache Aufgabe ist. Sie müssen lediglich das Attribut „border-style“ verwenden und es auf „double“ setzen. Dadurch werden auf jeder Seite des Elements zwei Linien gezeichnet, was Ihrer Seite ein einzigartiges und stilvolles Aussehen verleiht. Darüber hinaus können Sie andere Eigenschaften wie „border-width“ und „border-color“ verwenden, um die Farbe, Größe und andere Eigenschaften dieser Ränder anzupassen. Mit etwas Übung werden Sie bald in der Lage sein, atemberaubende Designs mit Bordüren zu erstellen.

Das obige ist der detaillierte Inhalt vonWie spezifiziere ich doppelte Ränder mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie zeige ich das verknüpfte Dateiformat mit CSS an?Nächster Artikel：Wie zeige ich das verknüpfte Dateiformat mit CSS an?

In Verbindung stehende Artikel

Mehr sehen