Nwlapcug.com


Come aggiungere angoli arrotondati ad un DIV

Un DIV viene utilizzato per contenere il contenuto di una pagina Web, siano essi immagini, testo o le sezioni sinistra e destra della tua pagina. La proprietà border-radius in un DIV permette di aggiungere angoli arrotondati ad un DIV senza immagini. Un valore di raggio bordo superiore produce angoli rotondi, mentre un valore più basso produce angoli più squadrati. Il tuo browser deve supportare gli angoli arrotondati per utilizzare la proprietà in CS3. Firefox, Chrome e Safari possono richiedere un'ulteriore linea di codice.

Istruzioni

1

Avviare un editor di testo, ad esempio Blocco note, TextPad o EditPad. Fare clic su "File" e "Open" nel menu. Individuare e fare doppio clic il file HTML che si desidera modificare.

2

Aggiungere il codice seguente sotto il tag di apertura < HEAD > 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 /

}

-->

< / stile >

3

Personalizza "border: 1px solid verde;" con le impostazioni di bordo che si desidera utilizzare. Per aumentare lo spessore del bordo, modificare "1px" su un valore maggiore. Per modificare lo stile di riga, sostituire "tinta" con "double", "tratteggiato" o "punteggiato". Per cambiare il suo colore, è necessario sostituire "verde" con un colore diverso.

4

Cambiamento "10px;" per "padding" per la quantità di spazio desiderata tra il bordo e il relativo contenuto.

5

Sostituire "300px;" per "larghezza" con la larghezza del vostro 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 tag < DIV > come segue. Angoli arrotondati si riferisce il contenuto.

< div > contenuto va qui. < / div >

8

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