CSS
Confine

Sintassi

• confine

• border: border-width border-style border-color | iniziale | ereditare;

• border-top: border-width border-style border-color | iniziale | ereditare;

• border-bottom: border-width border-style border-color | iniziale | ereditare;

• border-left: border-width border-style border-color | iniziale | ereditare;

• border-right: border-width border-style border-color | iniziale | ereditare;

• stile del bordo

• border-style: 1-4 nessuno | nascosto | punteggiato | tratteggiata | solido | doppio | groove | cresta | inserto | inizio | iniziale | ereditare;

• border-radius

• border-radius: 1-4 lunghezza | % / 1-4 lunghezza | % | iniziale | ereditare;

• border-top-left-radius: length | % [lunghezza | %] | iniziale | ereditare;

• border-top-right-radius: length | % [lunghezza | %] | iniziale | ereditare;

• border-bottom-left-radius: length | % [lunghezza | %] | iniziale | ereditare;

• border-bottom-right-radius: length | % [lunghezza | %] | iniziale | ereditare;

• border-immagine

• border-image: border-image-source border-image-slice [border-image-width [border-image-outset]] border-image-repeat

• border-image-source: nessuno | Immagine;

• border-image-slice: numero 1-4 | percentuale [riempimento]

• border-image-repeat: 1-2 stretch | ripetere | rotondo | spazio

• border-collapse

• border-collapse: separato | collasso | iniziale | ereditare

Osservazioni

border-radius

La proprietà border-radius consente di modificare la forma del modello di box base.

Ogni angolo di un elemento può avere fino a due valori, per il raggio verticale e orizzontale di quell'angolo (per un massimo di 8 valori).

Il primo insieme di valori definisce il raggio orizzontale. Il secondo set di valori opzionale, preceduto da un '/', definisce il raggio verticale. Se viene fornito un solo set di valori, viene utilizzato sia per il raggio verticale che orizzontale.

border-radius: 10px 5% / 20px 25em 30px 35em;

Il 10px è il raggio orizzontale in alto a sinistra e in basso a destra. E il 5% è il raggio orizzontale in alto a destra e in basso a sinistra. Gli altri quattro valori dopo "/" sono i raggi verticali per top-left, top-right, bottom-right e bottom-left.

Come per molte proprietà CSS, le abbreviazioni possono essere utilizzate per qualsiasi o tutti i valori possibili. È quindi possibile specificare qualsiasi valore da uno a otto valori. La seguente stenografia consente di impostare il raggio orizzontale e verticale di ogni angolo sullo stesso valore:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Border-radius è più comunemente usato per convertire elementi di riquadri in cerchi. Impostando il raggio del bordo a metà della lunghezza di un elemento quadrato, viene creato un elemento circolare:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Poiché il limite del raggio di confine accetta percentuali, è comune utilizzare il 50% per evitare di calcolare manualmente il valore del raggio del bordo:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Se le proprietà width e height non sono uguali, la forma risultante sarà un ovale piuttosto che un cerchio.

Esempio di raggio di confine specifico del browser:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

stile del bordo

La proprietà border-style imposta lo stile del bordo di un elemento. Questa proprietà può avere da uno a quattro valori (per ogni lato dell'elemento un valore).

Esempi:

border-style: dotted;

border-style: dotted solid double dashed;

border-style può anche avere i valori none e hidden . Hanno lo stesso effetto, ad eccezione delle opere hidden per la risoluzione dei conflitti di confine per gli elementi <table> . In una <table> con più bordi, none ha la priorità più bassa (nel senso di un conflitto, il bordo dovrebbe mostrare), e hidden ha la priorità più alta (nel senso di un conflitto, il bordo non mostrerebbe).

confine (stenografia)

Nella maggior parte dei casi, si desidera definire diverse proprietà del bordo ( border-width border-style border-color ) per tutti i lati di un elemento.

Invece di scrivere:

border-width: 1px;
border-style: solid;
border-color: #000;

Puoi semplicemente scrivere:

border: 1px solid #000;

Queste stenografie sono disponibili anche per ogni lato di un elemento: border-top , border-left , border-right e border-bottom . Quindi puoi fare:

border-top: 2px double #aaaaaa;

border-immagine

Con la proprietà border-image hai la possibilità di impostare un'immagine da usare al posto dei normali stili di bordo.

Un'immagine di border-image consiste essenzialmente di a

• border-image-source : il percorso dell'immagine da utilizzare
• border-image-slice : specifica l'offset utilizzato per dividere l'immagine in nove regioni (quattro angoli , quattro bordi e una parte centrale )
• border-image-repeat : specifica come vengono ridimensionate le immagini per i lati e il centro dell'immagine del bordo

Considera il seguente esempio dove border.png è un'immagine di 90x90 pixel:

border-image: url("border.png") 30 stretch;

L'immagine sarà divisa in nove regioni con 30x30 pixel. I bordi saranno usati come angoli del bordo mentre il lato sarà usato in mezzo. Se l'elemento è più alto / più largo di 30px questa parte dell'immagine sarà allungata . La parte centrale dell'immagine è di default trasparente.

border-[left | right | top | bottom]

La proprietà border-[left|right|top|bottom] viene utilizzata per aggiungere un bordo a un lato specifico di un elemento.

Ad esempio, se si desidera aggiungere un bordo sul lato sinistro di un elemento, è possibile:

#element {
    border-left: 1px solid black;
}

border-collapse

La proprietà border-collapse applica solo alla table s (e agli elementi visualizzati come display: table o display: table inline-table ) e stabilisce se i bordi della tabella vengono compressi in un singolo bordo o separati come in HTML standard.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Vedi anche Tabelle - voce della documentazione di compressione del bordo

Bordi multipli

Utilizzo del contorno:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Usando box-shadow:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Usando uno pseudo elemento:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Creare un bordo multicolore usando l'immagine del bordo

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

L'esempio precedente produrrebbe un bordo che comprende 5 colori diversi. I colori sono definiti attraverso un linear-gradient (puoi trovare maggiori informazioni sui gradienti nei documenti ). Puoi trovare maggiori informazioni sulla proprietà border-image-slice nell'esempio border-image nella stessa pagina.

( Nota: ulteriori proprietà sono state aggiunte all'elemento per scopi di presentazione ) .

Avresti notato che il bordo sinistro ha un solo colore (il colore iniziale del gradiente) mentre il bordo destro ha anche un solo colore (il colore finale del gradiente). Questo è dovuto al modo in cui funziona la proprietà dell'immagine del bordo. È come se il gradiente fosse applicato all'intera casella e quindi i colori venissero mascherati dalle aree di riempimento e di contenuto, facendolo apparire come se solo il bordo avesse il gradiente.

Quale / i bordo / i hanno un singolo colore dipende dalla definizione del gradiente. Se il gradiente è un gradiente da to right , il bordo sinistro sarà il colore iniziale del gradiente e il bordo destro sarà il colore finale. Se era un gradiente in to bottom , il bordo superiore sarebbe il colore iniziale del gradiente e il bordo inferiore sarebbe il colore finale. Sotto è l'uscita di un to bottom 5 sfumatura di colore.

Se il bordo è richiesto solo su lati specifici dell'elemento, allora la proprietà border-width può essere utilizzata come qualsiasi altro bordo normale. Ad esempio, l'aggiunta del codice seguente produrrebbe un bordo solo nella parte superiore dell'elemento.

border-width: 5px 0px 0px 0px;

Si noti che, qualsiasi elemento che ha proprietà border-image non rispetterà il border-radius (cioè il bordo non curva). Questo si basa sulla seguente affermazione nelle specifiche:

Gli sfondi di una scatola, ma non la sua immagine di bordo, vengono ritagliati sulla curva appropriata (come determinato da 'background-clip').