Come aggiungere angoli arrotondati ad un DIV

May 25

Un DIV è usato per tenere i contenuti di una pagina web, siano essi immagini, testi o alla sinistra e le sezioni di destra della vostra pagina. La proprietà border-radius in un DIV permette di aggiungere gli angoli arrotondati ad un DIV senza immagini. Un valore border-radius maggiore produce più rotondo angoli, mentre un valore inferiore produce angoli squadrati. Il tuo browser deve supportare gli angoli arrotondati per utilizzare la struttura in CS3. Firefox, Chrome e Safari potrebbero richiedere una linea supplementare di codice.

istruzione

1 Avviare un editor di testo, come Blocco note, TextPad o EditPad. Fai clic su "File" e "Apri" dal menu. Trovare e fare doppio clic sul file HTML che si desidera modificare.

2 Aggiungere il seguente codice sotto l'apertura <HEAD> tag per creare lo stile per i bordi arrotondati:

<Style type = "text / css">

<! -

div

{

border: 1px solid verde;

padding: 10px;

width: 300px;

border-radius: 10px;

-moz-border-radius: 10px; /

Firefox /

-webkit-border-radius: 10px; / Safari e Chrome /

}

->

</ Style>

3 Personalizza "border: 1px verde fisso;" con le impostazioni di confine che si desidera utilizzare. Per aumentare lo spessore, cambiamento "1px" del confine per un valore maggiore. Per cambiare il suo stile di linea, sostituire "solido" con "doppio", "tratteggiata" o "punteggiata". Per cambiare il colore, sostituire "verde" con un altro colore.

4 Change "10px;" per "imbottitura" per la quantità di spazio che si desidera tra il confine e il suo contenuto.

5 Sostituire "300px;" per "larghezza" con la larghezza del DIV (contenitore).

6 Sostituire "10px;" per "border-radius," "-moz-border-radius" e "WebKit-border-Radus" con il raggio che si desidera applicare. Utilizzare lo stesso valore per ogni impostazione.

7 Scorrere fino al tag <body>. Racchiudere il contenuto che si desidera formattare con apertura e chiusura <DIV> tag come segue. Si applica angoli arrotondati al contenuto.

<Div> contenuto va qui. </ Div>

8 Selezionare "File" e "Salva" dal menu per aggiornare il file HTML.