Verificação HTML: CSS: "clip-path": X não é um valor "clip-path".

Sobre este problema HTML

A propriedade clip-path define uma região de recorte que controla quais partes de um elemento são visíveis. Aceita um conjunto específico de tipos de valor, e qualquer desvio da sintaxe esperada irá desencadear um erro de validação. O validador verifica o seu CSS contra a especificação e assinala valores que não estão em conformidade.

Os tipos de valor aceites para clip-path são:

none — Sem recorte (o padrão).
Funções de forma básica — inset(), circle(), ellipse(), polygon(), e path().
Referência url() — Aponta para um elemento SVG <clipPath>, p.ex., url(#myClip).
Palavras-chave geometry-box — border-box, padding-box, content-box, margin-box, fill-box, stroke-box, view-box. Estas podem ser usadas sozinhas ou combinadas com uma forma básica.

Aqui estão os erros mais comuns que causam este erro:

Unidades em falta em valores de comprimento. Escrever circle(50 at 50% 50%) é inválido porque 50 precisa de uma unidade como px, em, ou %. O valor 0 é o único comprimento que não requer uma unidade.
Separadores incorretos. Em circle() e ellipse(), as coordenadas de posição após at devem ser separadas por espaços, não vírgulas. Em polygon(), cada par de coordenadas usa um espaço entre x e y, enquanto vírgulas separam os pontos uns dos outros.
Dados path() malformados. A string de caminho SVG dentro de path() deve estar envolvida em aspas, p.ex., path("M0 0 L100 0 L100 100 Z").
Erros tipográficos ou funções não suportadas. Usar um nome de função que a especificação não define, ou escrever mal uma como cirlce(), irá desencadear o erro.
Fill-rule polygon() inválido. Se especificar uma regra de preenchimento em polygon(), deve ser nonzero ou evenodd, seguida de uma vírgula antes do primeiro ponto.

Acertar na sintaxe clip-path importa para conformidade com padrões e consistência entre navegadores. Os navegadores podem ignorar silenciosamente um valor clip-path inválido, significando que o seu efeito visual pretendido simplesmente não aparecerá — e pode não perceber porquê. Validar o seu CSS apanha estes problemas cedo.

Aqui está uma referência rápida para a sintaxe correta de cada função de forma básica:

circle(<radius> at <cx> <cy>) — O raio é um comprimento ou percentagem. A posição usa espaços, não vírgulas.
ellipse(<rx> <ry> at <cx> <cy>) — Ambos os raios são comprimentos ou percentagens.
inset(<top> <right> <bottom> <left> round <border-radius>) — Os offsets são comprimentos ou percentagens. A palavra-chave round e border-radius são opcionais.
polygon([<fill-rule>,] <x1> <y1>, <x2> <y2>, ...) — Espaço entre x e y dentro de um ponto; vírgula entre pontos.
path("<SVG path data>") — A string de dados do caminho deve estar entre aspas.

Exemplos

Valores `clip-path` inválidos

<style>
  /* Inválido: raio sem unidade; vírgula entre coordenadas de posição */
  .clip-a {
    clip-path: circle(50 at 50%, 50%);
  }

  /* Inválido: vírgulas entre x e y dentro de cada ponto */
  .clip-b {
    clip-path: polygon(0%, 0%, 100%, 0%, 100%, 100%, 0%, 100%);
  }

  /* Inválido: dados do caminho não envolvidos em aspas */
  .clip-c {
    clip-path: path(M0 0 L100 0 L100 100 Z);
  }

  /* Inválido: nome da função mal escrito */
  .clip-d {
    clip-path: cirlce(50% at 50% 50%);
  }
</style>

Valores `clip-path` válidos

<style>
  /* Círculo válido: raio tem uma unidade; posição usa espaços */
  .clip-a {
    clip-path: circle(50px at 50% 50%);
  }

  /* Polígono válido: espaço entre x e y, vírgulas entre pontos */
  .clip-b {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  /* Caminho válido: dados SVG estão entre aspas */
  .clip-c {
    clip-path: path("M0 0 L100 0 L100 100 Z");
  }

  /* Inset válido com cantos arredondados */
  .clip-d {
    clip-path: inset(10% 20% 10% 20% round 8px);
  }

  /* Palavra-chave geometry-box válida combinada com uma forma */
  .clip-e {
    clip-path: padding-box circle(50% at 50% 50%);
  }

  /* Válido: referenciar um clipPath SVG */
  .clip-f {
    clip-path: url(#roundClip);
  }
</style>

Exemplo completo com referência SVG `<clipPath>`

<!doctype html>
<html lang="en">
<head>
  <title>Valid clip-path with SVG reference</title>
  <style>
    .clipped {
      clip-path: url(#roundClip);
      width: 200px;
      height: 200px;
      background: coral;
    }
  </style>
</head>
<body>
  <svg width="0" height="0" aria-hidden="true">
    <clipPath id="roundClip" clipPathUnits="objectBoundingBox">
      <circle cx="0.5" cy="0.5" r="0.5"></circle>
    </clipPath>
  </svg>
  <div class="clipped">Clipped element</div>
</body>
</html>

Quando encontrar este erro de validação, verifique cuidadosamente o valor reportado na mensagem de erro. Compare-o contra a sintaxe aceite para a função que está a usar, prestando atenção especial a unidades, separadores e aspas. Pequenas diferenças de sintaxe — uma vírgula onde deveria estar um espaço, ou uma unidade em falta — são os culpados mais frequentes.