Quindi vuoi un sito Web con bordi rotondi bello, ma non volete pasticciare con la creazione di immagini e caricare sul server FTP, quindi ricostruire queste immagini per adattare la grafica e le tabelle di dimensioni diverse? Beh, allora avete una soluzione per voi. Web design ha evoluto abbastanza lontano attraverso CSS (fogli di stile CSS) che possiamo ora inserire i bordi rotondi sui nostri siti Web senza caricare tutte le immagini. È invece possibile utilizzare una serie di tag HTML e attributi CSS sulla tua pagina web. Se non sai già su CSS, si dovrà leggere su di esso e creare un foglio di stile CSS, un documento di testo semplice con l'estensione. CSS che messo sul vostro server e link da pagina web HTML, quindi il browser sa usarlo.

Istruzioni

1

Stabilire dove i bordi arrotondati andrà nella tua pagina web.

2

Creare i seguenti tag nella pagina HTML intorno a questa zona. Devono essere messi in ordine. < div classe = "t" >< div classe = "b" >< div classe = "l" >< div classe = "r" >< div classe = "bl" >< div classe = "br" >< div classe = "tl" >< div class = "tr" > l'informazioni di testo, o il grafico qui... < / div >< / div >< / div >< / div >< / div >< / div >< / div >< / div > questo costruisce gli angoli.

3

Aprire il foglio di stile CSS e mettere questi tag in esso: .bl {background: url(bl.gif) 0 100% no-repeat}. br {background: 100% url(br.gif) 100% no-repeat}. TL {sfondo: url(tl.gif) 0 0 no-repeat}. TR {sfondo: url(tr.gif) 100% 0 no-repeat; padding: 10px}. Il risultato è quattro angoli con archi rotondi intorno al vostro testo o immagine.

4

Cancella il bordo tipico che va in giro le immagini angolo arrotondato creando un puntino piccolo, bianco, chiamato dot. git, che è la stessa dimensione come il bordo.

5

Aggiungere nuove regole CSS nel foglio di stile che richiamare questo blocco di confine (immagine dot. git) così si va intorno ai bordi del bordo, macchiare fuori le linee squadrate intorno agli angoli arcuate. Le regole sono:. b {sfondo: url(dot.gif) 0 100% repeat-x}. l {background: url(dot.gif) 0 0 repeat-y} tonyc {background: url(dot.gif) 100% 0 repeat-y}

6

Testare i bordi e apportare correzioni al codice se necessario.

Consigli & Avvertenze

• Nuovo codice CSS è sempre disponibile per rendere gli angoli arrotondati che sono molto eleganti. Tenere d'occhio per questi codici. Si possono trovare seguendo il link a risorse.