Comment obtenir des coins arrondis en CSS

CSS est une technologie importante dans la conception et le développement de sites Web. Elle peut fournir une multitude de solutions d'optimisation. L'une des optimisations couramment utilisées consiste à obtenir des coins arrondis. Dans cet article, nous présenterons comment obtenir des coins arrondis grâce à CSS.

1. Méthode Border-radius

L'attribut border-radius peut être utilisé pour obtenir des coins arrondis de la bordure. Cette propriété doit être définie sur une valeur qui représente le rayon du congé. Si cette valeur est fixée à 50%, alors les quatre coins de la boîte seront arrondis. Par exemple :

border-radius: 50%;

De plus, l'attribut border-radius peut également définir les valeurs du rayon de coin​​dans quatre directions. Par exemple, nous pouvons arrondir le coin supérieur gauche et garder les trois autres coins à angle droit :

border-top-left-radius: 20px;

2. Méthode Box-shadow

En utilisant l'attribut box-shadow, vous pouvez obtenir une boîte avec les quatre coins arrondis. L'attribut box-shadow et l'attribut border-radius fonctionnent ensemble pour mieux obtenir l'effet de coin arrondi. Par exemple :

box-shadow: 0 0 0 20px #f00;
border-radius: 20px;

Définissez tous les paramètres box-shadow sur 0, la boîte sera masquée, mais le paramètre border-radius aura toujours un effet. De cette manière, vous pouvez obtenir d'excellents coins arrondis.

3. Utilisez la méthode SVG

Bien que CSS puisse obtenir des coins arrondis, l'utilisation de graphiques SVG peut également obtenir un effet de coin arrondi plus distinctif. Les graphiques SVG peuvent obtenir diverses formes et ne se limitent pas aux formes de boîtes. La façon d'obtenir des coins arrondis à l'aide de SVG consiste à créer un graphique contenant des coins arrondis, puis à l'insérer dans un fichier HTML. Par exemple :

<svg width="150px" height="150px" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" rx="50" ry="50" width="140" height="140" fill="#0f0"/>
</svg>

Cela créera un rectangle aux coins arrondis et le remplira de vert. Étant donné que ce graphique utilise SVG, il peut être facilement mis à l'échelle à différentes résolutions.

4. N'oubliez pas la compatibilité

Enfin, faites attention à la compatibilité de la méthode CSS des coins arrondis dans les différents navigateurs. Bien que les navigateurs modernes prennent fortement en charge CSS3, il n'est pas compatible avec certains navigateurs plus anciens. Par conséquent, si vous avez besoin de prendre en charge davantage de navigateurs, veuillez utiliser les propriétés border-radius et box-shadow pour contrôler la compatibilité de manière appropriée, et soyez plus prudent lors de l'implémentation de coins arrondis via SVG.

Résumé :

CSS peut obtenir des coins arrondis grâce au rayon de bordure et à l'ombre de la boîte. De plus, l'utilisation de SVG peut obtenir divers effets de coins arrondis caractéristiques. Quelle que soit la méthode de mise en œuvre utilisée, la compatibilité des différents navigateurs doit être pleinement prise en compte. Grâce à une utilisation raisonnable, vous pouvez obtenir d'excellents effets de coins arrondis, rendant la page Web plus belle et plus élégante.

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!