Comment obtenir l'effet d'affichage du style arrondi du bouton avec CSS (exemple) ?

Dans le processus de conception Web, l'effet par défaut des attributs généraux de l'étiquette n'est pas très beau. Par exemple, le style du bouton, l'état par défaut est extrêmement ordinaire et n'a aucune sensation esthétique. Cet article vous présentera donc des exemples d'opérations connexes sur l'effet de bouton arrondi du style de bouton de configuration CSS.

Le code est le suivant :

<div style="width:100px;height:50px;background-color:red;border-radius:15px;">

ou

<input type="button" value=" " style="border-radius:5px;" />

L'effet est le suivant :

Après avoir lu le code ci-dessus, pensez-vous que c'est très simple ? En fait, la clé pour définir le style du bouton rectangle arrondi en HTML est l'attribut border-radius
en CSS. Tant que vous maîtrisez l'utilisation essentielle de cet attribut, la définition de coins arrondis pour les divs, les images ou les boutons de bordure peut être facilement réalisée.

Introduction aux points de connaissances clés : L'attribut border-radius est un attribut composite qui peut spécifier jusqu'à quatre attributs border -*- radius. Cet attribut vous permet d'ajouter une bordure arrondie à un élément !

border-radius: 1-4 length|% / 1-4 length|%;

L'ordre des quatre valeurs pour chaque rayon est : supérieur gauche, supérieur droit, inférieur droit, inférieur gauche. Si le coin inférieur gauche est omis, le coin supérieur droit est le même. Si le coin inférieur droit est omis, le coin supérieur gauche est le même. Si le coin supérieur droit est omis, le coin supérieur gauche est le même.

Ensuite, l'introduction de cet article sur la définition du style des coins arrondis des boutons CSS sera utile aux amis dans le besoin.

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!