Utilizzare border, border-width, border-color, border-style nel box model
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 25 May 2013
rss directory aggiungi in preferiti  
Home    Mappa directory    Giochi    XXXDirectory    Script    Forum




Border (box):

Un attributo che riveste molta importanza per la grafica è costituito da border e tutti i suoi derivati.

In questa sezione analizziamo i seguenti attributi:
  • Border (top, right, bottom e left )
  • Border-color (top-color, right-color, bottom-color e left-color )
  • Border-style (top-styler, right-styler, bottom-styler e left-styler )
  • Border-width (top, right, bottom e left )




Border:

L'attributo border riesce a stabilire la grandezza del bordo, il tipo di bordo ed il colore.
Esempio di codice:
<div style="border:1px solid black;">
testo, immagini, box, ecc...
</div>

Nel caso si volgia modificare il bordo di un box lato per lato possiamo utilizzare i seguenti attributi:
  • border-top (bordo superiore)
  • border-right (bordo a destra)
  • border-bottom (bordo inferiore)
  • border-left (bordo a sinistra)



Esempi border:

<div style="border:4px solid green;">
testo esempio 1
</div>
testo esempio 1

<div style="border:10px dotted #354633;">
testo esempio 2
</div>
testo esempio 2

<div style="border-top:4px solid green; border-right:10px solid blue; border-bottom:2px solid #563322; border-left:20px solid #332299;">
testo....
</div>
In questo caso abbiamo utilizzato quattro attributi, ma non è obbligatorio.


Border-color:

L'attributo border-color determina il colore del bordo.
Questo attributo può contenere il valore esadecimale del colore (visibili a questa pagina), oppure il nome (visibili a questa pagina).

Se vogliamo modificare indipendentemente il colore dei bordi, possiamo utilizzare i seguenti attributi:
  • border-top-color (colore bordo superiore)
  • border-right-color (colore bordo a destra)
  • border-bottom-color (colore bordo inferiore)
  • border-left-color (colore bordo a sinistra)


Per utilizzare l'attributo border-color e gli altri 4 derivati è necessario definire un bordo, sia come spessore che come stile es. <div style="border:1px solid;.....">



Esempi border-color:

<div style="border:5px solid; border-color: green;">
testo esempio 1
</div>
testo esempio 1

<div style="border:5px solid; border-top-color: #354633; border-right-color:red; border-bottom-color:yellow; border-left-color:green;">
testo esempio 2
</div>
testo esempio 2 - Non è obbligatorio inserire contemporaneamente i 4 attributi.



Border-style:

Per border-style intendiamo la forma del bordo.
Attualmente possiamo avere questi tipi di bordi:

  • none (nessun bordo)
  • hidden (nascosto)
  • dotted
    testo
  • dashed
    testo
  • solid
    testo
  • double
    testo
  • groove
    testo
  • ridge
    testo
  • inset
    testo
  • outset
    testo

Anche da border-style derivano degli attributi per la gestione singola dei bordi:
  • border-top-style (per il bordo superiore)
  • border-right-style (per il bordo a destra)
  • border-bottom-style (per il bordo inferiore)
  • border-left-style (per il bordo sinistro)



Esempio border-style:

<div style="border:10px green; border-top-style:dotted; border-right-style:solid; border-bottom-style:double; border-left-style:ridge;">
testo esempio 1
</div>
testo esempio 1 - Non è obbligatorio inserire contemporaneamente i 4 attributi.




Border-width:

L'attributo border-width indica lo spessore del bordo (per le unità di misura vi rimandiamo a questa pagina), ed anche questo attributo permette la gestione indipendente dei bordi tramite altri 4 attributi ad esso collegati:
  • border-top-width (per il bordo superiore)
  • border-right-width (per il bordo destro)
  • border-bottom-width (per il bordo inferiore)
  • border-left-width (per il bordo sinistro)



Esempio border-width:

<div style="border:solid green; border-width:5px;">
testo esempio 1
</div>
testo esempio 1

<div style="border:solid green; border-top-width:10px; border-right-width:20px; border-bottom-width:40px; border-left-width:80px;">
testo esempio 2
</div>
testo esempio 2 - Non è obbligatorio inserire contemporaneamente i 4 attributi.