Comment implémenter une bordure de ligne ondulée en CSS

Comment implémenter des bordures ondulées en CSS : créez d'abord un exemple de fichier HTML ; puis créez une balise p ; enfin implémentez des bordures ondulées via un dégradé radial "radial-gradient".

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur Dell G3.

Comment implémenter une bordure ondulée en CSS ?

Méthode de dégradé radial CSS3 pour obtenir des bordures ondulées et des chanfreins intérieurs

Préface

Le patron a donné une photo de coupon (comme indiqué ci-dessous). Quand j'ai jeté un coup d'œil, cette bordure ondulée et le chanfrein intérieur ne peuvent pas). être écrit en CSS, alors je l'ai expliqué au patron et j'ai demandé une découpe de l'interface utilisateur. Le patron a répondu : CSS3 peut le faire. Eh bien, les grands ont dit que cela pouvait être réalisé, pourquoi ne vous dépêchez-vous pas et demandez à frère Gu de voir Du Niang.

Implémentez le chanfrein intérieur

Téléchargez le code, puis expliquez le code

<p class="radial-gradient"></p>
<style>
.radial-gradient {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
           radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}
</style>

Le style du dégradé radial n'a pas besoin d'être expliqué, quiconque connaît du CSS le saura. La clé est le style .radial-gradient:after.

Concentrez-vous sur l'explication à quoi sert le style dégradé radial (cercle en haut à droite, #fff, #fff 10px, transparent 11px).

circle représente un dégradé circulaire, ce qui signifie simplement dessiner un cercle. Pour dessiner un cercle, vous devez connaître l’origine.

cercle en haut à droite Le haut à droite dans le cercle en haut à droite est la position d'origine. Ici, la position d'origine est la coordonnée relative au conteneur. Right signifie le côté le plus à droite du conteneur et top signifie le côté supérieur du conteneur, en d'autres termes, le coin supérieur droit.

cercle en haut à droite Les #fff, #fff 10px, transparent 11px derrière sont les longueurs de différents dégradés de couleurs à partir de l'origine.

Le premier #fff dans le code #fff, #fff 10px, transparent 11px signifie que l'origine est de couleur #fff, #fff 10px signifie que la distance depuis l'origine est de 10px de rayon, et la distance est entièrement de couleur #fff , transparent 11px signifie que la distance entre l'origine est de 10px à 11px sont toutes des couleurs transparentes. Puisqu'aucune autre couleur n'est définie, tout ce qui se trouve après 11px de l'origine est de couleur transparente.

Résumé du dégradé radial (cercle en haut à droite, #fff, #fff 10px, transparent 11px), consiste à dessiner un cercle avec le coin supérieur droit du conteneur comme origine, avec la couleur #fff à l'intérieur du rayon de 10 px et le rayon est supérieur à la plage de 10 px. À l'intérieur se trouvent toutes les couleurs transparentes.

De cette façon, un chanfrein intérieur est formé dans le coin supérieur droit

Identique au dégradé radial (cercle en bas à droite, #fff, #fff 10px, transparent 11px) ;

Réalisez une bordure ondulée

Téléchargez le code et ajoutez un style CSS

<style>
.radial-gradient:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
    background-size: 10px 10px;
}
</style>

fond : radial-gradient (circle, #fff, #fff 4px, transparent 5px Il n'y a pas de mot en haut à droite ici, indiquant le) ; origin Au centre du conteneur, #fff, #fff 4px, transparent 5px signifie que la couleur est #fff dans un rayon de 4px et que la couleur est transparente dans un rayon supérieur à 4px. De cette façon, il y a un cercle de couleur #fff d'un diamètre de 8px situé au centre du conteneur (le conteneur ici est : après).

(Le fond bleu est pour l'effet de démonstration)

Ajoutez la taille de l'arrière-plan : 10px 10px ; définissez la taille de l'arrière-plan sur 10px de large et 10px de haut, afin que vous puissiez obtenir plusieurs cercles de couleur #fff d'un diamètre de 8px.

(Le fond bleu est pour l'effet de démonstration)

left: -5px; Décalage de 5px vers la gauche, de sorte que seulement la moitié du :after soit à l'intérieur du conteneur .radial-gradient

Enfin, le rendu est joint

Résumé

Pour réaliser un chanfreinage intérieur, vous devez en fait dessiner un cercle avec la couleur #fff, seul un quart du cercle est à l'intérieur du conteneur. Pour obtenir la bordure ondulée, vous devez en fait dessiner plusieurs cercles. avec la couleur #fff, seule la moitié du cercle est à l'intérieur du conteneur

【 Apprentissage recommandé : 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!