CSS peut-il créer un rayon de bordure concave ?

Rayon de bordure concave : est-ce possible avec CSS ?

En CSS, la propriété border-radius nous permet de créer des coins arrondis. Cependant, l'effet par défaut est convexe, ce qui signifie que les coins sont arrondis vers l'extérieur. Est-il possible d'obtenir un rayon de bordure concave, où les coins sont arrondis vers l'intérieur ?

Bien que ce ne soit pas directement possible avec du CSS pur, nous pouvons simuler l'effet d'un rayon de bordure concave en utilisant des dégradés d'arrière-plan. Voici comment cela fonctionne :

1. Créez deux dégradés radiaux qui simulent la forme concave souhaitée.
2. Positionnez et répétez ces dégradés pour couvrir la zone souhaitée.

Par exemple :

#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;
}

Ce code crée l'illusion d'un rayon de bordure concave en superposant deux dégradés radiaux qui commencent et se terminent à la couleur d'arrière-plan de l'élément. Les points de départ des dégradés sont positionnés respectivement à -20 % et 120 % de la largeur de l'élément, créant ainsi l'effet concave.

Notez que cette technique peut ne pas être prise en charge dans tous les navigateurs, donc compatibilité des navigateurs doit être pris en considération lors de sa mise en œuvre en production.

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!