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}“.
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:
(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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
