CSS consente di creare bordi personalizzati utilizzando la proprietà border-width, border-stile e colore del bordo. Dei tre, solo la proprietà border-style è necessaria. Si possono mescolare e abbinare la proprietà di bordo in qualsiasi modo che si desidera. Tuttavia, il bordo personalizzato necessario almeno definire uno stile di bordo nella definizione. Quando si crea un bordo personalizzato, si può definire individualmente ogni proprietà per ogni lato, o utilizzare una proprietà a sintassi abbreviata per definire tutti i valori di confine in una sola riga. Utilizzare le classi CSS per creare bordi personalizzati diversi che possono applicare a qualsiasi elemento nel vostro file HTML.

Istruzioni

1

Aprire il file CSS e digitare quanto segue:

.borderone () {

border-width: 1px;

border-style: solid;

bordo-colore: viola;

}

Questo crea una classe che rende un bordo solido, viola un pixel di spessore.

2

Digitare quanto segue:

.bordertwo () {

larghezza del bordo: spessore;

stile del bordo: double;

}

Questa classe utilizza il valore predefinito di spesso per la larghezza invece di fornire una dimensione in pixel. Si può anche utilizzare "sottile" o "medio".

3

Digitare quanto segue:

.borderthree () {

stile del bordo: punteggiato solido;

colore del bordo: rosso, giallo;

}

Questa classe utilizza due valori ogni per le proprietà di stile e colore, alternando i due tra i top, right, bottom e i lati sinistro. In questo esempio, i lati superiore e inferiore del bordo sono punteggiate e rosso, mentre i lati destro e sinistro sono solide e giallo.

4

Digitare quanto segue:

.borderfour () {

border-top-width: 10px;

border-top-style: dashed;

border-top-color: blu;

border-right-width: 15px;

border-right-style: double;

border-right-color: giallo;

border-bottom-width: 3px;

border-bottom-style: punteggiato;

border-bottom-color: red;

border-left-width: 1px;

border-left-style: solid;

border-left-color: green;

}

Questa classe definisce ogni proprietà possibili del bordo separatamente, utilizzando una diversa larghezza, stile e colore per ciascun lato del bordo.

5

Digitare quanto segue:

.borderfive () {

border: 3px solid nero;

}

Questa classe utilizza la proprietà di bordo di stenografia per definire ogni attributo del bordo in una proprietà e applica gli stessi valori per ciascun lato del bordo. Lo stile del bordo è implicito come parte della proprietà. Questa proprietà è necessario definire le proprietà in larghezza, stile, ordine di colore, ma è possibile omettere la larghezza e il colore se non volete definirli.

6

Salvare il file CSS.