Heim > Web-Frontend > CSS-Tutorial > 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

WBOY
Freigeben: 2021-11-29 17:42:18
Original
2180 Leute haben es durchsucht

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;}“.

So erstellen Sie einen Rahmeneffekt, wenn Sie in CSS auf ein Bild klicken

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>
Nach dem Login kopieren

Ausgabeergebnis:

So erstellen Sie einen Rahmeneffekt, wenn Sie in CSS auf ein Bild klicken

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

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage