HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben
Farben RGB VERHEXEN HSL
CSS-Hintergründe
Hintergrundfarbe Hintergrundbild Hintergrund Wiederholung Hintergrundanhang Hintergrund Kurzschrift
CSS-Grenzen
Grenzen Rahmenbreite Randfarbe Grenzseiten Grenzkurzschrift Abgerundete Ränder
CSS-Ränder
Margins Margin Collapse
CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-Schriftarten
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-Icons CSS-Links CSS-Listen CSS-Tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float
Float Clear Float Examples
CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste
Navbar Vertical Navbar Horizontal Navbar
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
Linear Gradients Radial Gradients Conic Gradients
CSS-Schatten
Shadow Effects Box Shadow
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
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

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 -Randbilder

❮ Vorherige Nächste ❯

CSS-Randbilder

Mit der CSS border-image-Eigenschaft können Sie ein Bild festlegen, das als Rahmen um ein Element verwendet werden soll.

CSS-Eigenschaft border-image

Mit der CSS border-image-Eigenschaft können Sie ein Bild angeben, das anstelle des normalen Rahmens um ein Element verwendet werden soll.

Das Anwesen besteht aus drei Teilen:

  1. Das Bild, das als Rahmen verwendet werden soll
  2. Wo das Bild geschnitten werden soll
  3. Legen Sie fest, ob die Mittelteile wiederholt oder gestreckt werden sollen

Wir verwenden das folgende Bild (genannt "border.png"):

Grenze

Die border-imageEigenschaft nimmt das Bild und schneidet es wie ein Tic-Tac-Toe-Brett in neun Abschnitte. Anschließend werden die Ecken an den Ecken platziert, und die mittleren Abschnitte werden nach Ihren Angaben wiederholt oder gestreckt.

Hinweis: Damit border-imagedas Element funktioniert, benötigt es auch das borderEigenschaftsset!

Hier werden die mittleren Bereiche des Bildes wiederholt, um den Rand zu erstellen:

Ein Bild als Grenze!

Hier ist der Code:

Beispiel

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Hier werden die mittleren Bereiche des Bildes gestreckt, um den Rand zu erstellen:

Ein Bild als Grenze!

Hier ist der Code:

Beispiel

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Tipp: Die border-imageEigenschaft ist eigentlich eine abgekürzte Eigenschaft für die Eigenschaften border-image-source, border-image-slice, border-image-widthund .border-image-outsetborder-image-repeat

CSS border-image - Unterschiedliche Slice-Werte

Unterschiedliche Slice-Werte verändern das Aussehen des Rahmens vollständig:

Beispiel 1:

Rahmenbild: url(border.png) 50 rund;

Beispiel 2:

border-image: url(border.png) 20% rund;

Beispiel 3:

Rahmenbild: url(border.png) 30% rund;

Hier ist der Code:

Beispiel

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Testen Sie sich mit Übungen

Übung:

Geben Sie dem div-Element einen Bildrahmen. Verwenden Sie die Kurzformeigenschaft, um die Details des Bildrahmens zu definieren.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>

Eigenschaften von CSS-Randbildern

Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

❮ Vorherige Nächste ❯