CSS reference manual

CSS @rules (RULES)

Comprehensive list of CSS properties

CSS3 border-image-source Eigenschaft CSS3 border-image-repeat Eigenschaft

CSS3 border-image-Verwendung und Beispiel der slice-Eigenschaft

border-image-Die slice CSS-Eigenschaft wirdborder-image-sourceDas angegebene Bild in9Bereich: Vier Ecken, Vier Seiten und eine Mitte. Es wird durch Angabe4Verschiebungen, um dies zu erreichen, die normalerweise einen3×3Gitter.

Der mittlere Teil der Grenzbild wird weggeworfen und wird nicht vom Grenzbereich selbst verwendet, aberHintergrund-imageWenn der Schlüsselwort 'fill' auftritt, wird es als Hintergrundbild verwendet.

Die folgende Tabelle zeigt die Verwendung und Versionshistorie dieser Eigenschaft sowie die Syntax ihrer Verwendung in JavaScript-Skripten.

Standardwert:	100%
Anwendbar auf:	Diese Eigenschaft kann auf jedes Element angewendet werden, aber bei Tabellenelementen (wie tr, th, td) der Rahmen-Wenn der Wert der collapse-Eigenschaft collapse ist, border-image-Die slice-Eigenschaft ist ungültig. Es gilt auch für::first-letter.
Vererbung:	Keine
Animierbar:	Nein.Siehe auch Animationsattribut.
Version:	CSS3neue Funktion
JavaScript-Syntax:	object.style.borderImageSlice="60% 60%"

border-image-Syntax der slice-Eigenschaft

Die Syntax dieser Eigenschaft ist wie folgt:

border-image-slice: [ number | percentage ]　1　bis　4　values | fill | initial | inherit

Der folgende Beispiel zeigt, wie man border-image-slice-Eigenschaft.

Beispiel

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px solid transparent;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat: round;
}

Testen Sie es heraus‹/›

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
number	Für Rasterbilder bedeutet der Abstand des Bildes (in Pixeln), für Vektorbilder die Vektorkoordinaten.
percentage	Relativ zur Größe des Bildes: die Breite des Bildes in horizontaler Ausrichtung, die Höhe des Bildes in vertikaler Ausrichtung.
fill	Wenn vorhanden, wird der mittlere Teil des Bildes beibehalten. Andernfalls wird der mittlere Teil als transparent betrachtet.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, verwendet der verknüpfte Element seine Elternborder-image-Der berechnete Wert der slice-Eigenschaft.

Browserkompatibilität

border-image-Die Kompatibilität der slice-Eigenschaft der Browser, die in der folgenden Tabelle enthaltenen Zahlen stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

Weiters Lesen

Bitte参阅以下教程：CSS3 BorderundCSS Border.

CSS3 border-image-source Eigenschaft CSS3 border-image-repeat Eigenschaft