Comment créer un effet de rayon de bordure inversé en CSS ?

Création d'effets de rayon de bordure inversé

Question :

Un rayon de bordure inversé peut-il L'effet peut-il être obtenu là où les coins semblent se courber vers l'intérieur ?

Réponse :

La propriété border-radius du CSS natif n'autorise pas les valeurs négatives qui entraîneraient un effet inversé. Cependant, voici une approche alternative utilisant CSS :

Ajoutez quatre éléments supplémentaires dans le conteneur, en vous assurant qu'ils s'étendent légèrement au-delà de ses limites. Ces éléments doivent correspondre à la couleur d'arrière-plan de la page, créant ainsi une illusion du contenu de la page en dessous. Positionnez ces éléments stratégiquement autour des coins et appliquez un rayon de bordure pour obtenir l'effet inversé.

Extrait de code :

<code class="css">#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

<code class="html"><div id="main">
    <div class="top left"></div>
    <div class="top right"></div>
    <div class="bottom left"></div>
    <div class="bottom right"></div>
</div></code>

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!