Proprietà CSS border-image-outset
La proprietà CSS border-image-outset specifica la distanza di cui l'immagine del bordo si estende oltre il box del bordo. Esempi inclusi.
La proprietà CSS border-image-outset specifica la quantità di cui l'area dell'immagine del bordo si estende oltre il box del bordo dell'elemento. È una delle proprietà CSS3.
Per impostazione predefinita, un'immagine di bordo viene disegnata all'interno del box del bordo. Spingerla verso l'esterno con border-image-outset è utile quando si desidera che la cornice decorativa sporga sull'elemento — ad esempio, un bordo ornamentale, una cornice simile a un'ombra o un effetto nastro che deve trovarsi all'esterno del contenuto invece di comprimerlo.
L'outset modifica solo il punto in cui l'immagine viene disegnata; non influisce sulle dimensioni del box dell'elemento né sul suo layout. L'area extra può sovrapporsi al contenuto adiacente, quindi lasciare spazio sufficiente (o un margine extra) attorno all'elemento per evitare ritagli o sovrapposizioni.
Come funziona
border-image-outset accetta da uno a quattro valori, seguendo lo schema shorthand CSS standard top–right–bottom–left:
- Un valore imposta tutti e quattro gli outset.
- Due valori — il primo imposta il top e il bottom, il secondo imposta il right e il left.
- Tre valori — il primo imposta il top, il secondo imposta right e left, il terzo imposta il bottom.
- Quattro valori vengono applicati rispettivamente ai lati top, right, bottom e left, in quest'ordine.
Ogni valore può essere un <length> (ad esempio 10px) oppure un <number> senza unità. Un numero è un multiplo della larghezza del bordo corrispondente dell'elemento: con border-width: 10px, un outset di 2 corrisponde a 20px. I valori negativi non sono consentiti.
La proprietà non ha alcun effetto visibile a meno che non sia impostata una sorgente dell'immagine di bordo (tramite border-image o border-image-source).
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi, eccetto gli elementi interni delle tabelle quando border-collapse è "collapse". Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.borderImageOutset = "20px"; |
Sintassi
Valori CSS border-image-outset
border-image-outset: length | number | initial | inherit;Esempio della proprietà border-image-outset:
Esempio di codice CSS border-image-outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
</body>
</html>Risultato
![Descrizione CSS border-image-outset](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "Esempio CSS border-image-outset" =420x)
Nell'esempio precedente, l'immagine del bordo viene spinta di 10px oltre il bordo superiore, mantenuta a filo sul lato destro (0) e spinta di 15px oltre il bordo inferiore — in modo che la cornice sporga visibilmente sul paragrafo.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
length | La distanza di cui l'immagine di bordo si estende oltre il box del bordo, espressa in qualsiasi unità di lunghezza CSS (px, em, ecc.). Il valore predefinito è 0. | Prova » |
number | Un multiplo senza unità della larghezza del bordo corrispondente dell'elemento. Ad esempio, 2 con un bordo da 10px equivale a 20px. | Prova » |
initial | Imposta la proprietà al suo valore predefinito (0). | Prova » |
inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
border-image-outset è una delle parti dello shorthand border-image. Le proprietà correlate controllano il resto dell'effetto:
- border-image — lo shorthand che imposta tutti i valori di border-image in una volta.
- border-image-source — l'immagine da usare come bordo.
- border-image-slice — come l'immagine sorgente viene suddivisa nelle nove regioni del bordo.
- border-image-width — la larghezza dell'area dell'immagine di bordo.
- border-image-repeat — se le sezioni vengono allungate, ripetute o arrotondate.