Comment créer des coins arrondis inversés en CSS à l'aide de Box-Shadow ?

Création de coins arrondis inversés avec CSS

Dans votre code CSS actuel, votre objectif est de créer des coins arrondis inversés. Le code fourni utilise le rayon de bordure pour obtenir un effet de coin arrondi. Cependant, pour créer un rayon concave, nous pouvons exploiter la propriété box-shadow.

La technique implique les étapes suivantes :

1. Créer un carré transparent avec débordement masqué à l'aide de CSS.
2. Ajoutez un cercle transparent au carré à l'aide d'une ombre de boîte.
3. Positionnez le cercle de manière stratégique pour révéler seulement un quart de sa surface. circonférence.

Cette approche fournit une solution pour créer des coins concaves. Vous trouverez ci-dessous un exemple d'extrait pour illustrer la méthode :

 position : relative;<br> largeur : 200 px;<br> hauteur : 50 px;<br> couleur d'arrière-plan : bleu ;<br> border-radius : 9999px 0 0 9999px;<br> margin : 30px;<br> text-align: center;<br> color: #fff;<br> padding-top: 10px;<br>}</p><h1>haut,</h1><h1>bas {</h1><p>position : absolue ;<br> hauteur : 30px;<br> largeur : 30px;<br> droite : 0;<br> débordement : caché;<br>}</p><h1>haut {</h1><p>haut : -30px;<br>}</p><h1>bas {</h1><p>en bas : -30px;<br>}</p><h1>top::avant,</h1><h1>bottom::avant {</h1><p>contenu : '';<br> position : absolue;<br> droite : 0;<br> hauteur : 200%;<br> largeur : 200%;<br> border-radius : 100 %;<br> box-shadow : 10px 10px 5px 100px blue;<br> z-index : -1;<br>}</p><h1>top::before {</h1><p>en haut : -100%;<br>}

Dans ce code, nous combinons le carré avec débordement caché et le cercle avec ombre de boîte pour obtenir l'effet de rayon concave souhaité.

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!