Palavra-Chave de Cor do CSS

Este capítulo explicará transparent、currentcolor E inherit Palavra-chave.

Palavra-chave transparent

transparent A palavra-chave é usada para tornar a cor transparente. Isso geralmente é usado para definir uma cor de fundo transparente para um elemento.

Exemplo

Aqui, a cor de fundo do elemento <div> será completamente transparente e a imagem de fundo será exibida:

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

Experimente você mesmo

Atenção:transparent A palavra-chave é equivalente a rgba(0,0,0,0).Os valores de cor RGBA são uma extensão dos valores de cor RGB, com um canal alpha - que especifica a opacidade da cor. Para mais informações, consulte nossa CSS RGB Capítulo e Cor do CSS Capítulo.

Palavra-chave currentcolor

currentcolor A palavra-chave é semelhante a uma variável, que armazena o valor atual da propriedade color do elemento.

Se você desejar que uma cor específica seja consistente em um elemento ou página, esta palavra-chave será muito útil.

Exemplo

Neste exemplo, a cor da borda do elemento <div> será azul, pois a cor do texto do elemento <div> é azul:

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

Experimente você mesmo

Exemplo

Neste exemplo, a cor de fundo do <div> é configurada para o valor atual da cor do elemento body:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

Experimente você mesmo

Exemplo

Neste exemplo, a cor da borda e a cor da sombra do <div> são configuradas para o valor de cor atual do elemento body:

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

Experimente você mesmo

Palavra-chave inherit

inherit Palavra-chave especifica que o atributo deve herdar seu valor do elemento pai.

inherit Palavras-chave podem ser usadas em qualquer atributo CSS e podem ser usadas em qualquer elemento HTML.

Exemplo

Neste exemplo, a configuração da borda do <span> será herdada do elemento pai:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

Experimente você mesmo