CSS - Contorni

I contorni sono molto simili ai bordi, ma ci sono anche poche differenze importanti:

  • Un contorno non occupa spazio.

  • I contorni non devono essere rettangolari.

  • Il profilo è sempre lo stesso su tutti i lati; non è possibile specificare valori diversi per lati diversi di un elemento.

NOTE - Le proprietà dello schema non sono supportate da IE 6 o Netscape 7.

È possibile impostare le seguenti proprietà di struttura utilizzando CSS.

  • Il outline-width viene utilizzata per impostare la larghezza del contorno.

  • Il outline-style viene utilizzata per impostare lo stile della linea per il contorno.

  • Il outline-color viene utilizzata per impostare il colore del contorno.

  • Il outline proprietà viene utilizzata per impostare tutte le tre proprietà precedenti in una singola istruzione.

La proprietà outline-width

La proprietà outline-width specifica la larghezza del contorno da aggiungere alla casella. Il suo valore dovrebbe essere una lunghezza o uno dei valori thin, medium o thick, proprio come l'attributo border-width.

Una larghezza di zero pixel significa nessun contorno.

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà in stile contorno

La proprietà outline-style specifica lo stile della linea (continua, punteggiata o tratteggiata) che gira intorno a un elemento. Può assumere uno dei seguenti valori:

  • none- Nessun confine. (Equivalente alla larghezza del contorno: 0;)

  • solid - Il contorno è una singola linea continua.

  • dotted - Outline è una serie di punti.

  • dashed - Outline è una serie di brevi righe.

  • double - Il contorno è costituito da due linee continue.

  • groove - Il contorno sembra come se fosse scolpito nella pagina.

  • ridge - Il profilo sembra l'opposto del solco.

  • inset - Outline fa sembrare la casella incorporata nella pagina.

  • outset - Outline fa sembrare la scatola che esce dalla tela.

  • hidden - Uguale a nessuno.

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà del colore del contorno

La proprietà outline-color consente di specificare il colore del contorno. Il suo valore dovrebbe essere un nome di colore, un colore esadecimale o un valore RGB, come per le proprietà color e border-color.

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà outline

La proprietà outline è una proprietà abbreviata che consente di specificare i valori per una qualsiasi delle tre proprietà discusse in precedenza in qualsiasi ordine ma in una singola istruzione.

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Produrrà il seguente risultato: