Uno degli sviluppi più eccitanti in CSS3 è la capacità di progettare bordi fantasia. Con fogli di stile, è ora possibile creare bordi con angoli arrotondati, bordi immagine e bordi con un effetto di ombreggiatura. Questi bordi fantasia permettono al progettista di Web fuggire la monotonia di linee rette e levarsi in piedi fuori da uno sfondo piatto il testo della guida.

Istruzioni

1

Aprire il foglio di stile collegato ai documenti HTML. Se non hai già fatto uno, creare un nuovo file di testo e salvarlo come un file CSS come "Style. css" senza virgolette. Aprire il foglio di stile in un editor di testo o HTML.

2

Digitare la seguente regola CSS per il tag DIV. Si noti che la parte "div" è il selettore; le parentesi graffe chiuderà le dichiarazioni.

{} div

3

Immettere le seguenti dichiarazioni per impostare gli stili di bordo. La prima dichiarazione è una forma abbreviata CSS che definisce lo spessore del bordo, stile e colore, rispettivamente. Modificare i valori per applicare gli stili che desideri. La seconda riga determina quanto il confine si curva. Maggiore è il numero, maggiore sarà la quantità di curva. Un'ulteriore dichiarazione nella parte inferiore può essere aggiunto per garantire la compatibilità con Firefox 3.6 e versioni precedenti.

div

{

border: 1px solid #a0a0a0;

border-radius: 15px;

-moz-border-radius: 15px;

}

4

Aggiungere le dichiarazioni qui sotto per impostare la larghezza del bordo, colore di sfondo e imbottitura. L'imbottitura crea uno spazio tra il testo e le linee di confine. Modificare i valori per il colore e le dimensioni che necessarie.

padding: 20px 40px;

background: yellow;

Larghezza: 350px;

5

Salvare il file di foglio di stile. L'intera regola CSS per il tag DIV dovrebbe essere simile al seguente:

div

{

border: 1px solid #a0a0a0;

border-radius: 15px;

-moz-border-radius: 15px;

padding: 20px 40px;

background: yellow;

Larghezza: 350px;

}

6

Collegare il foglio di stile ai documenti HTML se non hanno fatto già. Inserire il seguente codice tra i tag HEAD di ogni pagina Web dove "xxx.css" è il nome del vostro file CSS.

< link rel = "stylesheet" type = "text/css" href="style.css" / >

Consigli & Avvertenze

• Se non vuoi che il bordo di avere una linea visibile, omettere la prima dichiarazione di "confine". Tenete a mente che se non si utilizza una linea di confine, goccia immagine ombreggiatura o un bordo, è necessario utilizzare un colore di sfondo. In caso contrario il DIV sarebbe invisibile.