September 13
Cascading Style Sheets (CSS) di livello tre - più comunemente noto come CSS3 - offre ai progettisti Web la possibilità di creare molti effetti visivi che una volta richiedevano complicato affettare immagine. Invece di tagliare le immagini in un editor di grafica e la loro applicazione alle pagine Web, è ora possibile utilizzare un paio di righe di codice CSS. Angoli arrotondati, ad esempio, richiedono solo la proprietà "border-radius". Un uso intelligente della struttura è in grado di creare una varietà di forme, tra cui cerchi. Utilizzare la proprietà "border-radius" in CSS per creare angoli arrotondati su quasi qualsiasi elemento HTML.
1 Creare un nuovo file HTML in un editor di codice o Notepad. Copia e incolla questo codice nel file:
<Html>
<Head>
<Title> Corners Tutorial </ title>
</ Head>
<Body>
</ Body>
</ Html>
2 Aggiungere un paio di tag div tra i tag body del tuo file HTML. Dare il div un nome ID. Il codice per la vostra div dovrebbe essere simile a questo:
<Div id = "arrotondato"> </ div>
3 Aggiungere un paio di tag di stile dopo i tag del titolo in testa del vostro file HTML. Ecco un esempio di tag di stile:
<Style type = "text / css"> </ style>
4 Creare una riga vuota tra i tag di stile e aggiungere il seguente codice:
arrotondato {}
Sostituire "arrotondato" con il nome che hai dato il div.
5 Impostare la proprietà "border-radius" ad un valore di pixel della vostra scelta. Il valore del raggio del bordo determina la quantità di arrotondamento che i browser si applicano div. Ecco un esempio:
arrotondata {
border-radius: 10px;
}
6 Dare ad ogni angolo di dimensioni curva diversa impostando la proprietà "border-radius" per ciascuno di essi. Ecco come il codice è:
arrotondata {
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 25px;
}
7 Stendi gli angoli arrotondati con l'aggiunta di valori "lunghezza" per le proprietà "border-radius". Ecco il codice:
border-top-left-radius: 50px 100px;
Il valore "lunghezza" è di 100 pixel e il raggio è impostato su 50 pixel. Questo crea una curva che è più lungo che alto. Invertire i valori per creare una curva che è più lunga che larga.