Recomendação de curso:

Função inset() do CSS

Definição e uso do CSS inset() Função define um retângulo que mantém uma distância embutida específica de cada lado do referencial.

inset() Função geralmente é usada com clip-path Propriedade e shape-outside Propriedades usadas juntas.

Exemplo

Exemplo 1

Cortar dois elementos <div> para que cada um dos lados mantenha uma distância embutida específica do referencial:

#blueDIV {
  flutuante: esquerda;
  largura: 150px;
  altura: 100px;
  cor-de-fundo: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  flutuante: esquerda;
  largura: 150px;
  altura: 100px;
  cor-de-fundo: rosa;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

Experimente você mesmo

Exemplo 2

Usar clip-path e inset() Realizar efeito de animação:

#myDIV {
  largura: 100px;
  altura: 100px;
  cor-de-fundo: coral;
  cor: verde;
  animação: mymove 5s infinita;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

Experimente você mesmo

Exemplo 3

usados juntos inset()、clip-path e shape-outside:

#blueDIV {
  flutuante: esquerda;
  largura: 150px;
  altura: 100px;
  cor-de-fundo: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

Experimente você mesmo

Sintaxe do CSS

inset(length-percentage round border-radius)

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Páginas relacionadas

Referência:Atributo clip-path CSS

Referência:Propriedade shape-outside do CSS

Referência:Função circle() do CSS

Referência:Função ellipse() do CSS

Referência:Função polygon() do CSS