CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben CSS-Hintergründe CSS-Grenzen CSS-Ränder CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung CSS-Text CSS-Schriftarten CSS-Icons CSS-Links CSS-Listen CSS-Tabellen CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe CSS-Schatten CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS- Grenzen


Mit den CSS-Rahmeneigenschaften können Sie den Stil, die Breite und die Farbe des Rahmens eines Elements festlegen.


Ich habe Grenzen auf allen Seiten.


Ich habe einen roten unteren Rand.


Ich habe abgerundete Ränder.


Ich habe einen blauen linken Rand.


CSS-Rahmenstil

Die border-styleEigenschaft gibt an, welche Art von Rahmen angezeigt werden soll.

Folgende Werte sind erlaubt:

  • dotted - Definiert einen gepunkteten Rand
  • dashed - Definiert einen gestrichelten Rahmen
  • solid - Definiert eine solide Umrandung
  • double - Definiert einen doppelten Rahmen
  • groove- Definiert einen gerillten 3D-Rand. Der Effekt hängt vom Randfarbenwert ab
  • ridge- Definiert einen geriffelten 3D-Rand. Der Effekt hängt vom Randfarbenwert ab
  • inset- Definiert einen 3D-Inset-Rand. Der Effekt hängt vom Randfarbenwert ab
  • outset- Definiert eine 3D-Anfangsgrenze. Der Effekt hängt vom Randfarbenwert ab
  • none - Definiert keine Grenze
  • hidden - Definiert einen verdeckten Rand

Die border-styleEigenschaft kann einen bis vier Werte haben (für den oberen Rand, den rechten Rand, den unteren Rand und den linken Rand).

Beispiel

Demonstration der verschiedenen Rahmenstile:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Ergebnis:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Hinweis: Keine der ANDEREN CSS-Randeigenschaften (über die Sie in den nächsten Kapiteln mehr erfahren werden) hat IRGENDEINE Wirkung, es sei denn, die border-styleEigenschaft ist gesetzt!