Come Creat CSS angoli arrotondati

October 20

Una delle caratteristiche più popolari di CSS3 è l'attributo border-radius che permette di creare caselle e pulsanti con angoli arrotondati. Anche se è possibile creare effetti angolo arrotondato con la creazione di una immagine per ogni angolo, questi richiedono tempo per creare e aggiungere più markup alla pagina. L'attributo border-radius permette di creare veri e propri angoli arrotondati, che una delle più recenti browser in grado di visualizzare. i vecchi browser ignorano l'attributo, che degrada con grazia a mostrare gli angoli di dialogo standard.

istruzione

1 Aprire un'applicazione di design editor di testo o Web e creare una nuova pagina HTML.

2 Aggiungere il seguente codice alla linea prima della chiusura "</ head>" tag:

<Style type = "text / css">

.rounded {

border: solid 2px #000;

border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;

width: 200px; Altezza: 40px;

}

</ Style>

Questo definisce un foglio di stile CSS che contiene una classe denominata "arrotondata". All'interno di questa classe, è prima di impostare il confine per l'elemento di destinazione, utilizzando una linea nera continua a 2 pixel di spessore per questo esempio. Successivamente, si imposta il raggio di confine per gli angoli curvi, misurata in pixel. Ogni browser attualmente utilizza i propri attributi, quindi è necessario aggiungere moz-border-radius per Firefox, e -webkit-border-radius per i browser basati su WebKit come Google Chrome e Safari. Infine, è possibile impostare la larghezza e l'altezza dell'elemento di destinazione.

3 Aggiungere il seguente codice dopo l'apertura HTML "<body>" tag:

<Div class = "arrotondato"> </ div>

Questo crea un blocco div HTML e applica la classe arrotondata per lo styling.

4 Salvare la pagina come "rounded.htm" e caricarlo sul server Web. Avviare un browser Web, quindi aprire "rounded.htm" per visualizzare la pagina. Nei browser CSS3-compatibili come Internet Explorer 9, Google Chrome 4.1 e Firefox 3.5 e superiori, il div è in stile con gli angoli arrotondati. versioni di browser precedenti che non supportano CSS3 visualizzare una finestra normale.

5 Modificare il codice CSS per la classe arrotondato al seguente:

.rounded {

border: solid 2px #000;

border-radius: 20px 30px 20px 0px;

-moz-border-radius: 20px 30px 20px 0px;

-webkit-border-radius: 20px 30px 20px 0px;

width: 200px; Altezza: 40px;

}

Questo permette di impostare un valore di raggio diverso per ogni angolo, in questo ordine: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Salvare la pagina e visualizzare nel browser per visualizzare le nuove impostazioni in azione, la creazione di una scatola a forma di fumetto.

Consigli e avvertenze

  • È possibile effettuare una serie di forme diverse, cambiando il raggio dei singoli angoli, al fine di aggiungere stile a un sito web senza l'aggiunta di immagini, che si aggiungono al tempo di caricamento della pagina.

Articoli Correlati