Sunkanmi Fafowora

Die CSS-Eigenschaft border-image-outset legt den Abstand zwischen dem border-image-Bereich eines Elements und dem Bereich fest, den es über die border-box des Elements hinausgeht.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%; 
  border-image-repeat: repeat;
  border-image-outset: 2;
}

Die CSS-Eigenschaft border-image-width wird verwendet, um die Breite der Border-Bilddatei zu bestimmen, wie sie von der CSS-Eigenschaft border-image-source bereitgestellt wird.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%;
  border-image-repeat: repeat; 
}

border-image-slice in CSS teilt dem Browser mit, wo ein Bild, das zur Erstellung der Teile eines Elementrands verwendet wird, "geschnitten" werden soll.

.element {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 30%;
  border-image-repeat: repeat; 
}

Die Eigenschaft border-image-slice wird definiert in …

Die CSS-Eigenschaft border-image-repeat steuert, wie ein Randbild wiederholt wird, um die Außenränder eines Elements zu füllen. Sie kann auch das Zentrum des Hintergrunds eines Elements steuern, wenn border-image-slice auf fill gesetzt ist.…

Die CSS-Eigenschaft border-image-source erstellt Ränder um Elemente, indem sie eine Bilddatei oder einen CSS-Verlauf als Quelle verwendet.

.container {
  border-width: 2rem;
  border-style: dotted;
  border-color: grey;
  border-image-source: url('path/to/image.jpg');
  border-image-repeat: repeat;
  border-image-slice: 100;
}

Die Pseudo-Klasse :autofill in CSS ermöglicht es uns, <input>-Elemente zu gestalten, die Inhalte enthalten, die vom Browser automatisch ausgefüllt werden.

Nehmen wir als Beispiel ein neues Formular zur Benutzerregistrierung. Haben Sie jemals in ein Feld geklickt oder darauf getippt und eine Dropdown-Liste gesehen …

Der ::file-selector-button in CSS ist ein Pseudo-Element, das <input type="file"> in HTML auswählt.

input::file-selector-button {
  background-color: #f8a100;
}

Sie sind zweifellos schon über Datei-Upload-Eingabefelder gestolpert – sie sind sehr verbreitet, insbesondere wenn Dateien zu einem Formular hinzugefügt werden sollen, wie z. B. ein PDF …

Die Pseudo-Klasse :right in CSS wird mit der @-Regel @page verwendet, um alle rechten Seiten in einem mehrseitigen Druckdokument auszuwählen. Dies ist praktisch für die Einstellung von Rändern auf beidseitig bedruckten Seiten, sodass die Seiten auf der "rechten" Seite …

Die Pseudo-Klasse :left in CSS wird mit der @-Regel @page verwendet, um alle linken Seiten in einem mehrseitigen Druckdokument auszuwählen. Dies ist praktisch für die Einstellung von Rändern auf beidseitig bedruckten Seiten, sodass die Seiten auf der "linken" Seite …