Come creare bordi colorati con CSS3
10 agosto 2010Un’altra interessante proprietà di CSS3 è border-image. Con questa funzione è possibile utilizzare un’immagine di bordo al posto della solita linea colorata.
border-image attualmente è supporatata da Safari, Google Chrome e Firefox 3.1 (Alpha). La sintassi è:
-moz-border-image: url(”border.png”) 27 27 27 27 round round; /* Firefox 3.1+ */
-webkit-border-image:url(”images/border.png”) 27 27 27 27 round round; /* Safari, Chrome */
border-image:url(”images/border.png”) 27 27 27 27 round round; /* Opera 10.5, IE 9.0 */
-webkit-border-image:url(”images/border.png”) 27 27 27 27 round round; /* Safari, Chrome */
border-image:url(”images/border.png”) 27 27 27 27 round round; /* Opera 10.5, IE 9.0 */
Ed il risultato:
Lorem ipsum dolor sit amet.
Oppure:
-moz-border-image: url(”border.png”) 27 27 27 27 stretch stretch; /* Firefox 3.1+ */
-webkit-border-image:url(”images/border.png”) 27 27 27 27 stretch stretch; /* Safari, Chrome */
border-image:url(”images/border.png”) 27 27 27 27 stretch stretch; /* Opera 10.5, IE 9.0 */
-webkit-border-image:url(”images/border.png”) 27 27 27 27 stretch stretch; /* Safari, Chrome */
border-image:url(”images/border.png”) 27 27 27 27 stretch stretch; /* Opera 10.5, IE 9.0 */
Con risultato:
Lorem ipsum dolor sit amet.
Analizzando i vari elementi della dichiarazione:
- url(”border.png”)
Indica la posizione in cui si trova l’immagine che verrà tagliata per decorare il nostro elemento. Niente di particolarmente nuovo, in quanto la proprietà background-image usa la stessa sintassi.
E questa è l’immagine utilizzata nel nostro caso:
- 27 27 27 27
La seconda parte descrive il modo in cui l’immagine verrà suddivisa in 9 parti:
- round round / stretch stretch
Descrive come le sezioni dell’immagine sono disposte. Il valore di default è stretch.
Per chi non è in grado di vedere il risultato, ecco uno screenshot dei due esempi:
