Nwlapcug.com


Tutorial CSS angoli arrotondati

Tutorial CSS angoli arrotondati


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.