gostaria de fazer uma div onde border é 1 cor, o padding é 2ª cor e background-color é 3ª cor, é possível?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
gostaria de fazer uma div onde border é 1 cor, o padding é 2ª cor e background-color é 3ª cor, é possível?
Oi Albert!
Para fazer o que você quer, você precisa de ao menos dois elementos, pois o atributo padding utiliza o background-color por padrão. Há dois jeitos de fazer o que quer:
<!-- html -->
<div class="comDivInterna">
<div class="divInterna">
COM DIV INTERNA
</div>
</div>/* css */
.comDivInterna {
border: 1px solid blue;
background-color: red;
padding: 1em;
margin: 1em 0;
}
.divInterna {
background-color: green;
}Deste modo, a div interna dá a cor do background-color que você quer e a div externa dá as cores de border e de padding, que na verdade será a sua background-color.
:before:<!-- html -->
<div class="semDivInterna">SEM DIV INTERNA</div>/* css */
.semDivInterna {
border: 1px solid blue;
background-color: green;
padding: 1em;
position: relative;
margin: 1em 0;
}
.semDivInterna:before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 1em solid red;
background-color: transparent;
box-sizing: border-box;
}Neste caso, você define as cores de border e background-color no próprio elemento div. O pseudo-elemento :before será o que dará a cor de padding, deixando a cor de fundo transparecer através do background-color: transparent.
Se quiser ver a mágica rapidinho, aqui tem um codepen que eu fiz de exemplo com o código acima.
É isso! Espero ter ajudado e que você consiga resolver seu problema! Continue sempre estudando e participando do nosso fórum!
Lembre-se de marcar sua dúvida como solucionada quando isso acontecer, para que os próximos com dúvidas semelhantes possa encontrar a resposta rapidamente =)
Um abração!