Heim > Artikel > Web-Frontend > So erstellen Sie einen Rahmeneffekt, wenn Sie in CSS auf ein Bild klicken
So erstellen Sie einen Rahmeneffekt, wenn Sie in CSS auf ein Bild klicken
- WBOYOriginal
- 2021-11-29 17:42:182124Durchsuche
In CSS können Sie den Selektor und das Rahmenattribut „:active“ verwenden, um den Effekt eines Rahmens zu erzielen, wenn auf das Bild geklickt wird. Die Syntax lautet „Bildelement: aktiv {Rahmen: Rahmengröße, feste Rahmenfarbe;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erstellen Sie einen Rahmeneffekt, wenn in CSS auf ein Bild geklickt wird.
In CSS können Sie den :active-Selektor und das Rahmenattribut verwenden, um den Effekt eines angeklickten Rahmens zu erzielen Wählen Sie aktive Links aus. Wenn Sie auf einen Link klicken, wird dieser aktiv (aktiviert). Mit der Eigenschaft border wird der Rahmenstil eines Elements festgelegt.
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>
</head>
<body>
<style type="text/css">
div{
width:388px;
height:249px;
}
div:active{
border:1px solid red;
}
</style>
<div><img src="1118.02.png"/ alt="So erstellen Sie einen Rahmeneffekt, wenn Sie in CSS auf ein Bild klicken" ></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Rahmeneffekt, wenn Sie in CSS auf ein Bild klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!