recherche

Maison >interface Web >tutoriel CSS >Comment modifier la bordure d'un bouton en CSS

Comment modifier la bordure d'un bouton en CSS

WBOY
WBOYoriginal
2021-12-10 14:55:014632parcourir

En CSS, vous pouvez utiliser le sélecteur ":active" et l'attribut border pour modifier l'effet de bordure lorsque vous cliquez sur le bouton. La syntaxe est "élément bouton : actif {border: valeur d'épaisseur de bordure valeur de couleur unie}".

Comment modifier la bordure d'un bouton en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment modifier la bordure lorsque l'on clique sur le bouton en CSS

En CSS, vous pouvez utiliser le sélecteur :active et l'attribut border pour modifier la bordure lorsque l'on clique sur le bouton.

 : Le sélecteur actif est utilisé pour sélectionner l'élément lorsqu'on clique dessus et définir le style. L'attribut border est utilisé pour définir le style de bordure de l'élément.

L'exemple est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button{
            width:100px;
            height:50px;
            border-radius:25px;
            border:5px solid red;
        }
        button:active{
          border:5px solid pink;
        }
    </style>
</head>
<body>
    <button>按钮</button>
</body>
</html>

Résultat de sortie :

Comment modifier la bordure dun bouton en CSS

(Partage de vidéos d'apprentissage : 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：
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
Article précédent：Comment définir un cercle circulaire en CSS3Article suivant：Comment définir un cercle circulaire en CSS3

Articles Liés

Voir plus