Come creare un wrapper div con angoli arrotondati

September 6

Come creare un wrapper div con angoli arrotondati


Invece di usare le immagini per creare l'effetto di angoli arrotondati in una pagina Web, molti programmatori HTML usano una tecnica CSS puro per creare wrapper div che caratterizzano gli angoli arrotondati senza grafica. Il termine "involucro" si riferisce ad un elemento in una pagina Web o l'area complessiva del contenuto della pagina. I progettisti utilizzano CSS perché le immagini possono rallentare il tempo di caricamento della pagina; Inoltre, CSS scale più facilmente le immagini, il che significa che è possibile creare una pagina lo stesso aspetto su schermo di un computer piccolo e uno schermo più grande. Creazione di un involucro con gli angoli arrotondati richiede solo poche righe di codice CSS.

istruzione

istruzione

1 Aprire il foglio di stile CSS e il documento HTML per la pagina Web che si sta modificando.

2 Digitare "<div id =" wrapper "> </ div>" dove si desidera che l'elemento con gli angoli arrotondati da visualizzare nel documento HTML. Potrai inserire il contenuto di tale elemento tra l'apertura e chiusura tag div.

3 Tipo "#wrapper {border-radius: Xpx;}" nel foglio di stile CSS, e sostituire la "X" con un numero che rappresenta il modo rotondo si desidera che le curve siano; maggiore è il numero di pixel, più arrotondata dell'elemento sarà. Sarà inoltre necessario specificare altri elementi, come la larghezza e il colore di sfondo della confezione. Una volta terminato, il codice dovrebbe essere simile al seguente:

wrapper {width: 100px; background-color: #ccc; border-radius: 40px;}

4 Rendere compatibile il codice cross-browser in modo da visualizzare come si intende in tutti i principali browser. Mozilla Firefox non supporta il comando "border-radius", quindi sarà necessario aggiungere il seguente codice di CSS del tuo involucro:

-moz-border-radius: Xpx;

Sostituire la "X" con un valore numerico, ha dichiarato in pixel. Il risultato finale del vostro codice sarà simile a questo:

wrapper {width: 100px; background-color: #ccc; border-radius: 40px; -moz-border-radius: 40px;}

5 Regolare la fascetta in modo che la curva in ogni angolo ha un raggio diverso modificando il codice CSS e l'aggiunta di tag specifici per creare ogni angolo. Ad esempio, per arrotondare l'angolo in alto a sinistra, e anche implementare il codice che renderà il vostro involucro compatibile con Firefox, usare il codice come il seguente:

border-top-left-radius: 40px; -moz-border-top-left-radius: 40px;

Per arrotondare l'angolo in alto a destra, utilizzare codice simile a:

border-top-right-radius: 40px; -moz-border-top-right-radius: 40px;

Per arrotondare l'angolo in basso a sinistra, usare:

border-bottom-left-radius: 40px; -moz-border-bottom-left-radius: 40px;

Per arrotondare l'angolo in basso a destra, usare:

border-bottom-right-radius: 40px; -moz-border-bottom-right-radius: 40px;

6 Salvare il foglio di stile CSS e il documento HTML per le modifiche abbiano effetto.


Articoli Correlati