border-image-outset
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die border-image-outset-Eigenschaft von CSS legt die Distanz fest, um die ein Element's Randbild von seiner Rand-Box entfernt ist.
Die Teile des Randbildes, die durch border-image-outset außerhalb der Rand-Box des Elements gerendert werden, lösen keine Überlaufrandgrößen aus und erfassen keine Mausereignisse.
Probieren Sie es aus
border-image-outset: 0;
border-image-outset: 15px;
border-image-outset: 30px;
border-image-outset: 40px;
<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
/* <length> value */
border-image-outset: 1rem;
/* <number> value */
border-image-outset: 1.5;
/* top and bottom | left and right */
border-image-outset: 1 1.2;
/* top | left and right | bottom */
border-image-outset: 30px 2 45px;
/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;
/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;
Die Eigenschaft border-image-outset kann als ein, zwei, drei oder vier Werte angegeben werden. Jeder Wert ist entweder eine <length> oder eine <number>. Negative Werte sind ungültig und führen dazu, dass die border-image-outset-Deklaration ignoriert wird.
- Wenn ein Wert angegeben ist, gilt er für alle vier Seiten.
- Wenn zwei Werte angegeben sind, gilt der erste für oben und unten und der zweite für links und rechts.
- Wenn drei Werte angegeben sind, gilt der erste für oben, der zweite für links und rechts, und der dritte für unten.
- Wenn vier Werte angegeben sind, gelten sie in dieser Reihenfolge (im Uhrzeigersinn) für oben, rechts, unten und links.
Werte
<length>-
Die Größe des
border-imageOutsets als Abmessung — eine Zahl mit Einheit. <number>-
Die Größe des
border-imageOutsets als ein Vielfaches der entsprechendenborder-widthdes Elements. Zum Beispiel, wenn ein Elementborder-width: 1em 2px 0 1.5remhat, undborder-image-outset: 2, würde die endgültigeborder-image-outsetals2em 4px 0 3remberechnet werden.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | Alle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
| Animationstyp | by computed value type |
Formale Syntax
border-image-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
Beispiele
Ein Randbild ausrichten
HTML
<div id="outset">This element has an outset border image!</div>
CSS
#outset {
width: 10rem;
background: #cceeff;
border: 1.4rem solid;
border-image: radial-gradient(#ffff22, #5555ff) 40;
border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
margin: 2.1rem;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-outset |
Browser-Kompatibilität
Loading…