Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Immagini del bordo CSS


Immagini del bordo CSS

Con la proprietà CSS border-image, puoi impostare un'immagine da utilizzare come bordo attorno a un elemento.


Proprietà CSS border-image

La proprietà CSS border-imageconsente di specificare un'immagine da utilizzare al posto del normale bordo attorno a un elemento.

L'immobile si compone di tre parti:

  1. L'immagine da utilizzare come bordo
  2. Dove tagliare l'immagine
  3. Definire se le sezioni centrali devono essere ripetute o allungate

Useremo la seguente immagine (chiamata "border.png"):

Confine

La border-imageproprietà prende l'immagine e la divide in nove sezioni, come un tris. Quindi posiziona gli angoli agli angoli e le sezioni centrali vengono ripetute o allungate come specificato.

Nota: per border-imagefunzionare, l'elemento necessita anche del borderset di proprietà!

Qui, le sezioni centrali dell'immagine vengono ripetute per creare il bordo:

Un'immagine come confine!

Ecco il codice:

Esempio

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Qui, le sezioni centrali dell'immagine vengono allungate per creare il bordo:

Un'immagine come confine!

Ecco il codice:

Esempio

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Suggerimento: la border-imageproprietà è in realtà una proprietà abbreviata per le proprietà border-image-source, border-image-slice, border-image-widthe .border-image-outsetborder-image-repeat



CSS border-image - Diversi valori di sezione

Diversi valori di fetta cambiano completamente l'aspetto del bordo:

Esempio 1:

border-image: url(border.png) 50 round;

Esempio 2:

border-image: url(border.png) 20% rotondo;

Esempio 3:

border-image: url(border.png) 30% rotondo;

Ecco il codice:

Esempio

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Mettiti alla prova con gli esercizi

Esercizio:

Assegna all'elemento div un bordo dell'immagine. Utilizzare la proprietà della mano corta per definire i dettagli del bordo dell'immagine.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>


Proprietà immagine bordo CSS

Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched