Comment créer un rayon de bordure concave avec CSS ?

Rayon de bordure concave : une illusion avec des dégradés radiaux

Atteindre un rayon de bordure concave avec CSS seul peut sembler une tâche impossible, étant donné que les valeurs négatives du rayon de bordure ne produisent aucun effet. Cependant, il existe une solution astucieuse utilisant des dégradés radiaux.

Pour créer l'illusion d'une bordure concave, nous pouvons utiliser plusieurs dégradés radiaux positionnés autour des bords de notre élément. Voici un exemple :

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%, transparent, transparent 100px, #888888 100px),
      radial-gradient(circle 20px at 120% 50%, transparent, transparent 100px, #888888 100px);
    background-size: 100px 200px, 100px 200px;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}</code>

En positionnant soigneusement les dégradés radiaux et en ajustant leurs rayons, nous pouvons créer l'effet d'une bordure concave, comme le montre l'image fournie. Il est important de noter que la prise en charge des dégradés radiaux varie selon les navigateurs et que les navigateurs plus anciens peuvent nécessiter une syntaxe supplémentaire pour garantir la compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!