Prima browser è diventato compatibili con la proprietà "border-radius" di Cascading Style Sheets (CSS), designer necessaria per tagliare angoli in programmi di editing grafici, quindi applicarli alle pagine Web utilizzando layout complicati trucchi. Con "border-radius," è possibile rendere arrotondati DIVs con solo una riga o due del codice e senza le immagini. È anche possibile modificare le forme degli angoli arrotondati e applicare un arrotondamento diverso per ogni angolo di un DIV.
Istruzioni
1
Aprire il file HTML in un editor di codice quali jEdit, Notepad + + o BBEdit. Digitare "< div >" tag nel codice come questo:
< div >< / div >
Digitare il contenuto tra i tag "< div >". È possibile inserire qualsiasi contenuto che ti piace, come immagini e testo.
2
Aggiungere un attributo ID per il tag di apertura "< div >". Utilizzare l'ID per dare il vostro DIV un nome univoco e significativo. È possibile utilizzare un ID più volte sulla stessa pagina Web senza causare problemi di layout quando si tenta di indirizzare l'ID nei CSS. Aggiungere l'attributo ID come questo:
< div id = "arrotondato" > il contenuto... < / div >
3
Scorrere verso l'alto nel file HTML e cercare "< link >" o "< style >" tag. Aprire un file CSS a cui fa riferimento un tag "< link >" e aggiungere il codice CSS. Se si trova solo il tag "< style >", quindi aggiungere il codice CSS tra i tag. È possibile aggiungere i tag te stesso, troppo, tra i tag "< head >".
4
Digitare un selettore - codice per "selezionare" un elemento HTML - per impostare come destinazione il vostro DIV con il suo nome ID. Aggiungere la proprietà "border-radius" tra la parentesi graffe e impostarlo su un valore in pixel. Il codice è simile al seguente:
arrotondato {border-radius: 10px;}
Alti valori di raggio rendono DIVs più arrotondato, mentre i valori più bassi creano un effetto di arrotondamento più sottile.
5
Aggiungere una lunghezza del raggio per modificare la forma della curva come questo:
arrotondato {border-radius: 10px 20px;}
Nell'esempio di cui sopra dà il confine un raggio di 10 pixel e imposta la larghezza dell'angolo a 20 pixel.
6
Dare ogni angolo un proprio stile "border-radius" come questo:
arrotondati () {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
Consigli & Avvertenze
- Impostare il "border-radius" su un valore maggiore del valore di spaziatura interna del DIV per rendere gli angoli interni arrotondati quando si applica un bordo spesso.
- A partire da maggio 2011, tutti i browser supportano "border-radius" senza l'uso di prefissi vendor. Non è necessario aggiungere proprietà come "- webkit - border-radius" per rendere arrotondati gli angoli lavorano.