border-image-width CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die border-image-width-Eigenschaft von CSS legt die Breite des Randbildes eines Elements fest.
Wenn der Wert dieser Eigenschaft größer als die border-width des Elements ist, wird das Randbild über den Rand des Paddings (und/oder Inhalts) hinausgehen.
Probieren Sie es aus
border-image-width: 30px;
border-image-width: 15px 40px;
border-image-width: 2.6rem;
border-image-width: 20% 8%;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: black;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
Syntax
/* Keyword value */
border-image-width: auto;
/* <length> value */
border-image-width: 1rem;
/* <percentage> value */
border-image-width: 25%;
/* <number> value */
border-image-width: 3;
/* top and bottom | left and right */
border-image-width: 2em 3em;
/* top | left and right | bottom */
border-image-width: 5% 15% 10%;
/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;
/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;
Die border-image-width-Eigenschaft kann mit einem, zwei, drei oder vier Werten aus der unten stehenden Liste angegeben werden.
- Wenn ein Wert angegeben wird, gilt die gleiche Breite für alle vier Seiten.
- Wenn zwei Werte angegeben werden, gilt die erste Breite für oben und unten, die zweite für links und rechts.
- Wenn drei Werte angegeben werden, gilt die erste Breite für oben, die zweite für links und rechts, die dritte für unten.
- Wenn vier Werte angegeben werden, gelten die Breiten in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).
Werte
<length-percentage>-
Die Breite des Randes, angegeben als
<length>oder als<percentage>. Prozentsätze beziehen sich auf die Breite des Randbildbereichs für horizontale Abstände und auf die Höhe des Randbildbereichs für vertikale Abstände. Darf nicht negativ sein. <number>-
Die Breite des Randes, angegeben als Vielfaches der entsprechenden
border-width. Darf nicht negativ sein. auto-
Die Breite des Randes wird gleich der intrinsischen Breite oder Höhe (je nachdem, was anwendbar ist) der entsprechenden
border-image-slicegemacht. Wenn das Bild nicht die erforderliche intrinsische Dimension hat, wird stattdessen die entsprechendeborder-widthverwendet.
Formale Definition
| Anfangswert | 1 |
|---|---|
| Anwendbar auf | Alle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Größe des Rahmenbildbereichs |
| Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
| Animationstyp | by computed value type |
Formale Syntax
border-image-width =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Beispiele
Tiling eines Randbildes
Dieses Beispiel erstellt ein Randbild unter Verwendung der folgenden ".png"-Datei, die 90 mal 90 Pixel groß ist:
Daher ist jeder Kreis im Quellbild 30 mal 30 Pixel groß.
HTML
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
CSS
p {
border: 20px solid;
border-image: url("border.png") 30 round;
border-image-width: 16px;
padding: 40px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-width |