suchen

Heim >Web-Frontend >CSS-Tutorial >So ändern Sie den Rand einer Schaltfläche in CSS

So ändern Sie den Rand einer Schaltfläche in CSS

WBOY
WBOYOriginal
2021-12-10 14:55:014632Durchsuche

In CSS können Sie den Selektor und das Rahmenattribut „:active“ verwenden, um den Rahmeneffekt zu ändern, wenn auf die Schaltfläche geklickt wird. Die Syntax lautet „Schaltflächenelement: aktiv {Rahmen: Rahmenstärkewert, einfarbiger Wert}“.

So ändern Sie den Rand einer Schaltfläche in CSS

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So ändern Sie den Rahmen, wenn in CSS auf die Schaltfläche geklickt wird.

In CSS können Sie den :active-Selektor und das Border-Attribut verwenden, um den Rahmen zu ändern, wenn auf die Schaltfläche geklickt wird.

: Der aktive Selektor wird verwendet, um das Element auszuwählen, wenn darauf geklickt wird, und den Stil festzulegen. Das Randattribut wird verwendet, um den Rahmenstil des Elements festzulegen.

Das Beispiel sieht wie folgt aus: 

<!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>

Ausgabeergebnis:

So ändern Sie den Rand einer Schaltfläche in CSS

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Rand einer Schaltfläche in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So legen Sie einen kreisförmigen Kreis in CSS3 festNächster Artikel：So legen Sie einen kreisförmigen Kreis in CSS3 fest

In Verbindung stehende Artikel

Mehr sehen