So legen Sie den Rahmenstil in CSS fest

CSS (Cascading Style Sheets) ist eine Auszeichnungssprache für Webdesign. Sie bietet verschiedene Stile und Techniken, um Webseiten lebendiger und schöner zu gestalten. Unter diesen ist das Festlegen von Rahmen eine gängige Stilanwendung. In diesem Artikel befassen wir uns mit dem Festlegen von Rahmen mit CSS.

1. CSS-Rahmen-Grundlagen

Vorausgesetzte Kenntnisse: CSS-Rahmen bestehen aus Linien und der Stil, die Breite und die Farbe der Linien können eingestellt werden.

Die Hauptattribute zum Festlegen von Rahmen in CSS sind wie folgt:

1. border-style: Rahmenstil, der durchgezogen (durchgezogene Linie), gepunktet (gepunktete Linie), gestrichelt (gestrichelte Linie) oder doppelt (doppelte durchgezogene Linie) sein kann ), Rille (3D-Rillenlinie, Randfarbe ist unter diesem Attribut ungültig), Grat (3D-Kammlinie, Randfarbe ist unter diesem Attribut ungültig), Einschub (3D-Einfügungslinie, Randfarbe ist unter diesem Attribut ungültig) ) , outset (die Startlinie von 3D, border-color ist unter diesem Attribut ungültig), none (kein Rand).
2. Rahmenbreite: Rahmenbreite, die auf einen bestimmten Pixelwert oder drei vordefinierte Breiten von dünn, mittel und dick eingestellt werden kann.
3. border-color: Rahmenfarbe, die auf einen bestimmten Farbwert oder transparent eingestellt werden kann.

Diese Attribute können einzeln oder kombiniert festgelegt werden, zum Beispiel:

Rahmen: 2 Pixel durchgezogen #000;

Der obige Code bedeutet, dass der Rahmen festgelegt wird, die Breite beträgt 2 Pixel, der Stil ist eine durchgezogene Linie und die Farbe ist schwarz (#000 ).

2. CSS-Rahmenstil

Der Rahmenstil ist sehr wichtig und kann den visuellen Effekt der Webseite bestimmen. Im Folgenden sind einige gängige Rahmenstile aufgeführt:

1. Fester Rand

Der feste Rand ist der gebräuchlichste Stil und kann mit dem Attribut „border-style: solid“ festgelegt werden.

Beispielcode:

.border-solid {
  border-style: solid;
  border-width: 2px;
  border-color: #000;
}

Rendering:

2. Gepunkteter Rand

Gepunkteter Rand ist ebenfalls ein häufig verwendeter Stil, der mit dem Attribut „border-style: dotted“ oder „border-style: dashed“ festgelegt werden kann. Darüber hinaus können Sie auch border-style: double verwenden, um doppelte durchgezogene Linien festzulegen, und Sie können auch border-style: ridge, border-style: inset, border-style: outset verwenden, um einen 3D-Effektrand festzulegen.

Beispielcode:

.border-dotted {
  border-style: dotted;
  border-width: 2px;
  border-color: #000;
}

Rendering:

3. Benutzerdefinierter Rahmen

Zusätzlich zu den oben voreingestellten Rahmenstilen können wir den Rahmen auch anpassen. CSS stellt die Eigenschaft „border-image“ bereit, damit wir den Rahmen anpassen können. border-image muss ein Bild als Rand verwenden. Die vier Ecken und vier Seiten des Bildes können jeweils auf unterschiedliche Breiten eingestellt werden, sodass der Effekt eines benutzerdefinierten Randes erzielt werden kann.

Beispielcode:

.border-img {
  border-image: url("border.png") 30 30 30 30 / 10px;
}

Rendering:

3. CSS-Rahmen mit abgerundeten Ecken

Abgerundete Eckenränder sind sehr verbreitet und können Webseiten weiche visuelle Effekte verleihen und werden auch in vielen Kartendesigns verwendet . .

CSS bietet das Attribut „Rahmenradius“ zum Festlegen des Bogengrads des Rahmens. Es kann gleichzeitig den Bogen der vier Ecken steuern, und Sie können das Attribut „Abgerundete Ecken“ des Rahmens auch einzeln festlegen.

Beispielcode:

.border-radius {
  border: 2px solid #000;
  border-radius: 10px; /* 或者使用 border-radius: 10px 10px 10px 10px; */
}

Rendering:

4. CSS-Randverlauf

Durch die Verwendung von Verlaufsrändern kann die Webseite hochwertiger aussehen, und Sie können auch die Farbe des Verlaufs anpassen.

Wir können die Eigenschaft linear-gradient in CSS3 verwenden, um den Effekt von Verlaufsrändern zu erzielen. Das linear-gradient-Attribut ist eine Verlaufsfunktion, die das Festlegen der Farbe, Richtung und Startposition des Verlaufs erfordert.

Beispielcode:

.gradient-border {
  border: 2px solid;
  border-image: linear-gradient(to right top, #ff8177, #ff867a, #ff8c7f, #f99185, #cf556c, #b12a5b, #8b0f4d, #610528) 1;
}

Rendering:

5. Zusammenfassung

In diesem Artikel werden hauptsächlich die Grundkenntnisse zum Festlegen von Rahmen mit CSS vorgestellt, einschließlich Stil, Breite, Farbe des Rahmens und Effekten wie abgerundeten Ecken und Steigungen. Der Rahmenstil kann durch einfache CSS-Eigenschaftseinstellungen erreicht werden, und der Rahmen kann auch angepasst werden, wodurch die Webseite einzigartiger und lebendiger wird.

Das obige ist der detaillierte Inhalt vonSo legen Sie den Rahmenstil in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!