Propriedade background-clip

Entenda como a propriedade background-clip do CSS3 funciona.

por Diego Eis 03/01/2012 ~ 1 min. / 107 palavras

A propriedade background-clip é muito simples de se entender. Até agora nós nunca tínhamos como controlar onde o background começaria a ser desenhado. Imagine que temos um elemento com um determinado padding e que você queira que o background, seja ele uma imagem ou uma cor, aparecesse somente onde está o conteúdo, ignorando a parte do padding.

O background-clip tem 4 valores: border-box, content-box, padding-box e text. O valor text foi inserido pelo pessoal do Webkit em 2008 e dave ser incluída no padrões em algum momento por conta da sua utilidade!

Este exemplo de como funciona a propriedade dispensa maiores explicações.

Aqui tem a documentação oficial.