Questo articolo spiegherà le parole chiave trasparent, currentcolor ed inherit.

La parola chiave trasparent

La parola chiave trasparent viene utilizzata per rendere trasparente un colore. Viene spesso utilizzato per creare un colore di sfondo trasparente per un elemento.

Esempio

Qui, il colore di sfondo dell'elemento <div> sarà completamente trasparente e l'immagine di sfondo sarà visibile attraverso:

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

Visualizza esempio

La parola chiave currentcolor

La parola chiave currentcolor è come una variabile che contiene il valore corrente della proprietà color di un elemento.

Questa parola chiave può essere utile se si desidera che un colore specifico sia coerente in un elemento o in una pagina.

Esempio

In questo esempio il colore del bordo dell'elemento <div> sarà blu, perché il colore del testo dell'elemento <div> è blu:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Visualizza esempio

Esempio

In questo esempio il colore di sfondo di <div> è impostato sul valore di colore corrente dell'elemento body:

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

Visualizza esempio

Esempio

In questo esempio il colore del bordo e il colore dell'ombra di <div> sono impostati sul valore di colore corrente dell'elemento body:

body {
 color: green;
}

div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Visualizza esempio

La parola chiave inherit

La parola chiave inherit specifica che una proprietà dovrebbe ereditare il suo valore dal suo elemento genitore.

La parola chiave inherit può essere utilizzata per qualsiasi proprietà CSS e su qualsiasi elemento HTML.

Esempio

In questo esempio le impostazioni del bordo di <span> verranno ereditate dall'elemento genitore:

div {
  border: 2px solid red;
}

span {
  border: inherit;
}

Visualizza esempio