Livello di Cascading Style Sheets (CSS) tre - più comunemente conosciuto come CSS3 - dà Web designer la possibilità di creare molti effetti visivi che affettare immagine complicato una volta richiesto. Invece di tagliare le immagini in un editor di grafica e la loro applicazione alle pagine Web, è ora possibile utilizzare poche righe di codice CSS. Angoli arrotondati, ad esempio, richiedono solo la proprietà "border-radius". Uso intelligente di questa proprietà è possibile creare una varietà di forme, tra cui cerchi. Utilizzare la proprietà "border-radius" in CSS per creare angoli arrotondati su quasi qualsiasi elemento HTML.
Istruzioni
Preparare il vostro codice HTML
1
Creare un nuovo file HTML in un editor di codice o blocco note. Copiare e incollare questo codice nel file:
< html >
< head >
< title > angoli Tutorial < / title >
< / head >
< corpo >
< / body >
< / html >
2
Aggiungere un paio di div tag tra i tag body del file HTML. Dare il div un nome ID. Il codice per il vostro div dovrebbe apparire come questo:
< div id = "arrotondato" >< / div >
3
Aggiungere una coppia di stile tag dopo il tag title nella testa di file HTML. Ecco un esempio di tag di stile:
< style type = "text/css" >< / stile >
Applicare bordi arrotondati usando i CSS
4
Creare una riga vuota tra i tag di stile e aggiungere il seguente codice:
{} arrotondati
Sostituisci "arrotondato" con il nome hai dato div.
5
Impostare la proprietà "border-radius" su un valore in pixel della vostra scelta. Il valore del raggio del vostro bordo determina la quantità di arrotondamento che browser si applicano al vostro div. Ecco un esempio:
arrotondati () {
raggio bordo: 10px;
}
6
Dare una dimensione diversa curva ogni angolo impostando la proprietà "border-radius" per ciascuno di essi. Ecco come appare il codice:
arrotondati () {
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 25px;
}
7
Allungare gli angoli arrotondati con l'aggiunta di valori "lunghezza" di tua proprietà "border-radius". Ecco il codice:
border-top-left-radius: 100px 50px;
Il valore di "lunghezza" è 100 pixel e il raggio è impostato su 50 pixel. Questo crea una curva che è più lunga che alto. Invertire i valori per creare una curva che è più ampia.
Consigli & Avvertenze
- È inoltre possibile impostare la proprietà "border-radius" ai valori di percentuale. Applicare "border-radius: 50%;" per trasformare il vostro div in un cerchio.
- Applicare le proprietà "border-radius" a qualsiasi elemento HTML che si desidera. Invece di creare un div, considera arrotondamento angoli di intestazioni o anche le immagini.
- Questi codici di CSS3 non funzionerà su browser meno recenti, tra cui Internet Explorer 8 e sotto. Considerare l'utilizzo di una basata su immagini o JavaScript fallback per i browser o consentire agli utenti di tali browser vedere spigoli invece.