Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)-tutoriel HTML-php.cn

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

奋力向前

Libérer： 2021-08-18 17:55:19

original

4493 Les gens l'ont consulté

Dans l'article précédent "html : Comment obtenir l'effet de zone de saisie dans les pages Web (explication détaillée du code)", j'ai présenté comment utiliser le HTML pour obtenir l'effet de zone de saisie. L'article suivant vous présentera comment utiliser CSS pour créer un effet de bouton arrondi. Voyons comment le faire ensemble.

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

Comment créer un bouton arrondi dans une page Web en utilisant html

1 Créez un nouveau fichier html Tout d'abord, entrez un a dans <code>body et insérez un lien vide. <a href="#"></a> , puis insérez le code introduisant le style en ligne dans title. html文件，首先body中先输入一个a标签，并插入一个空链接。<a href="#"></a>按钮，然后在title中插入引入内嵌样式的代码<style type="text/css"></style>。

代码示例

<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style type="text/css">
 
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>
</html>

Copier après la connexion

代码效果

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

2、将a标签添加一个css样式，命名为【btn-style】，并定义按钮的宽、高、背景色、字体颜色、去掉下划线。添加disply:block，不然定义按钮的宽高都不会生效。然后在a标签中引入btn-style

Échantillon de code

<style type="text/css">
           .btn-style{
                width: 150px;
                height: 50px;
                color: #f8ff00;
                background:#010dfb;
                text-decoration: none;
                display: block;
           }
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>

Copier après la connexion

Effet de code

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code) 2. Ajoutez un style CSS à la balise a, nommez-la [btn-style] et définissez la largeur et la largeur de le bouton. Hauteur, couleur d’arrière-plan, couleur de police, supprimer le soulignement. Ajoutez disply:block, sinon la largeur et la hauteur définies du bouton ne prendront pas effet. Introduisez ensuite le style btn-style dans la balise a.

Exemple de code

line-height: 50px;
text-align: center;
font-size:"微软雅黑"；

Copier après la connexion

Effet de code

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code) 3. Continuez à ajouter des styles et à définir le centrage horizontal, le centrage vertical, la police et la taille de la police pour le bouton.

Exemple de code

border-radius: 100px;

Copier après la connexion

Effet de code

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

4. Définissez les quatre coins du bouton sur des coins arrondis pour qu'il ressemble davantage à un bouton.

border-radius: 10px

Copier après la connexion

Effet de code

L'effet est terminé, d'accord. Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

Pensez-vous que le rayon de bordure n'est que des coins arrondis ? En fait, cela ne fait pas référence au rayon du cercle où se trouve la bordure. Je vais expliquer en détail le paramètre d'attribut border-radius.

Les unités de valeur d'attribut peuvent être utilisées : em, px, pourcentage, etc.

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code) Vous pouvez l'essayer et changer le rayon de bordure : 100px en 10px

border-radius: 10px 20px 0px 30px;

Copier après la connexion

Effet de code

Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

"Niveau de chaque coin arrondi de l'élément « Radius » et « Vertical Radius » sont tous deux définis sur 10px.

🎜border-radius peut définir 1 à 4 valeursen même temps. Si quatre valeurs sont définies, elles correspondent au coin supérieur gauche, au coin supérieur droit, au coin inférieur droit et au coin inférieur gauche. coin. 🎜rrreee🎜Effet de code🎜🎜🎜🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo HTML🎜🎜

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!