Comment puis-je créer un effet de bordure concave en CSS ?

Utiliser des dégradés pour créer un effet concave

En CSS, border-radius est un outil puissant pour ajouter des courbes aux bords d'un élément. Cependant, cela se limite à créer des bordures convexes, là où la courbe fait saillie vers l'extérieur. Que faire si vous voulez une bordure concave, où la courbe plonge vers l'intérieur ?

Exemple : bordure convexe

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

Tentative de solution

Pour créer une bordure concave, vous pouvez essayer d'utiliser des valeurs négatives pour border-radius. Cependant, cette approche ne fonctionne pas en CSS.

Solution : Dégradés radiaux

Bien que vous ne puissiez pas créer une véritable bordure concave avec CSS seul, vous pouvez simuler l'effet en utilisant des dégradés radiaux. Les dégradés vous permettent de créer des transitions douces entre les couleurs, et en utilisant plusieurs dégradés, vous pouvez créer l'illusion d'un bord incurvé.

Considérez l'exemple suivant :

<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>

Ce CSS crée deux dégradés radiaux qui se chevauchent pour former un bord concave. Le premier dégradé commence par un cercle transparent à -20 % et passe à une couleur unie #888888 à 100 %. Le deuxième dégradé fait de même, mais à partir de 120%.

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!