Partagez un article en utilisant CSS3 pour obtenir un code d'effet de coins arrondis concaves

Cet article présente principalement l'exemple de code pour réaliser des coins arrondis concaves en CSS3. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un oeil

Le congé, tout le monde doit pouvoir le faire, bordure-rayon, comment réaliser un congé concave ?

Vous pouvez utiliser une boîte ronde blanche pour couvrir la majeure partie de la boîte carrée, mais celle-ci est opaque. Lorsque l'arrière-plan change, vous devez changer la couleur de la boîte de recouvrement, ou l'arrière-plan est un dégradé, ce qui signifie. est plus difficile à modifier, ou l'arrière-plan est une image, etc., cette méthode n'est tout simplement pas facile à modifier. Pour parler franchement, une fois la partie recouverte opaque, l'adaptabilité n'est pas forte.

Nous introduisons ici un congé concave utilisant un dégradé radial, qui peut résoudre les problèmes ci-dessus. Vous pouvez utiliser CSS pour générer un congé concave avec un arrière-plan transparent.

1. Dégradé linéaire de base

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</p>

2. Ajoutez un pourcentage pour ajuster la plage de dégradé

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 20%,blue 80%);
}
<p></p>

3. Condensez la plage de dégradés jusqu'à ce qu'ils se chevauchent, formant deux blocs de couleur séparés par du rouge et du bleu

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 50%,blue 50%);
}
 <p></p>

4. , changez le rouge en Lorsqu'il devient transparent, vous ne pouvez voir que les taches de couleur bleue.

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,transparent 50%,blue 50%);
}

<p></p>

5. Pensez au dégradé radial de la même manière, réduisez également le cercle de dégradé jusqu'à ce qu'il se chevauche et définissez la couleur près du centre du cercle sur transparente.

 /* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <p class=&#39;raidal&#39;></p>

6. Le dégradé radial peut définir la position centrale du rayon du cercle, alors réglez-le sur le coin supérieur gauche, ajustez le rayon supérieur gauche à 200 px, et vous le ferez. constatez que l'arrière-plan est transparent et concave. Coins arrondis mis en œuvre.

Lors de l'application, vous pouvez utiliser des pseudo-éléments pour le définir, puis utiliser le positionnement absolu, ajuster la position et la combiner pour obtenir l'effet souhaité

 /* 径向渐变主体 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<p class=&#39;raidal1&#39;></p>

7. De la même manière dans les quatre directions, ajustez simplement la position centrale du cercle

 /* 左上 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
/* 右上 */ 
.raidal2 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}
/* 右下 */ 
.raidal3 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}
/* 左下 */
 .raidal4 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
} 
<p class=&#39;raidal1&#39;></p> 
<p class=&#39;raidal2&#39;></p>
 <p class=&#39;raidal3&#39;></p>
 <p class=&#39;raidal4&#39;></p>

8 De même, si vous ne souhaitez pas avoir des coins aussi arrondis, vous pouvez également créer une ellipse. Définissez deux paramètres pour le rayon, qui est une ellipse.

 /* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <p class=&#39;ellipse&#39;></p>

Le dégradé radial possède de nombreux paramètres que vous pouvez essayer d'ajuster vous-même. Diverses formes étranges peuvent apparaître, qui ne seront pas démontrées ici. Relativement parlant, les coins arrondis concaves suffisent

[Recommandations associées]

1 Tutoriel vidéo CSS en ligne gratuit

2. manuel

3.

php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

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!