Comment obtenir des bordures arrondies et des effets circulaires avec CSS ? (Photo + tutoriel vidéo)-connaissance CSS-php.cn

Maison

Comment obtenir des bordures arrondies et des effets circulaires avec CSS ? (Photo + tutoriel vidéo)

Sep 13, 2018 pm 04:41 PM

L'effet des bordures arrondies CSS est généralement utilisé dans les barres de navigation ou les boîtes d'invite dans la conception Web frontale. L'effet de la définition de bordures arrondies ou d'images arrondies via CSS peut rendre la page Web globale plus riche.

Cet article vous présentera comment utiliser css pour définir l'effet de bordure arrondie . Ci-dessous, nous vous donnerons une explication détaillée des connaissances pertinentes à travers des exemples de code spécifiques.

Code de bordure arrondie cssL'exemple est le suivant :

Exemple 1 : effet de bordure arrondie css simple face

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>css圆角边框代码示例</title>
   <style type="text/css">
      div{
         width: 200px;
         height: 200px;
         background: #A6E22B;
         margin: 20px auto;
         /*实现单边圆角*/
         border-top-left-radius:20px;
            border-top-right-radius:20px;
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
      }
   </style>
</head>
<body>
<div></div>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons un carré d'un côté de 200. Lorsque nous ajoutons uniquement un rayon de bordure supérieur gauche de style CSS de 20 px, l'effet de coin arrondi supérieur gauche de ce div sera obtenu. Comme indiqué ci-dessous :

Comment obtenir des bordures arrondies et des effets circulaires avec CSS ? (Photo + tutoriel vidéo)

Lorsque nous continuons à ajouter un rayon supérieur droit de bordure de style CSS de 20 px, l'effet consistant à ajouter uniquement des coins arrondis en haut sera obtenu. . Comme indiqué ci-dessous :

Comment obtenir des bordures arrondies et des effets circulaires avec CSS ? (Photo + tutoriel vidéo)

Ensuite, nous continuons à ajouter deux styles CSS, border-bottom-left-radius et border-bottom-right-radius, c'est-à-dire The L'effet final du code ci-dessus implémenté dans le navigateur est le suivant :

Comment obtenir des bordures arrondies et des effets circulaires avec CSS ? (Photo + tutoriel vidéo)

Ainsi, à travers la série de descriptions ci-dessus, avez-vous découvert des points de connaissances importants sur les bordures arrondies CSS ? C'est l'attribut border-radius ! Cette propriété est une propriété abrégée permettant de définir les quatre propriétés border-*-radius. Cet attribut est utilisé pour ajouter des bordures arrondies aux éléments !

Exemple 2 : effet de bordure circulaire CSS

 /*同时实现四个边圆角*/
 border-radius: 100px;

Copier après la connexion

Sur la base du code HTML de l'exemple 1, nous ajoutons un seul bloc div carré d'une longueur de côté de 200px css border-radius style attribut, et définir la valeur sur 100px signifie que le rayon est défini sur 100px. L'effet de rendu est le suivant :

Comment obtenir des bordures arrondies et des effets circulaires avec CSS ? (Photo + tutoriel vidéo)

Cet article est une introduction spécifique à la définition de bordures arrondies avec CSS. J'espère qu'il sera utile aux amis dans le besoin ! Pour plus de connaissances HTML/css, vous pouvez suivre le site Web PHP chinois Tutoriel vidéo HTML et 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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn