Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie CSS3, um beim Bewegen der Maus einen Schatteneffekt zu erzielen
So verwenden Sie CSS3, um beim Bewegen der Maus einen Schatteneffekt zu erzielen
- WBOYOriginal
- 2021-12-14 18:26:396168Durchsuche
In CSS können Sie den Selektor „:hover“ und das Attribut „box-shadow“ verwenden, um den Schatteneffekt zu erzielen, wenn die Maus schwebt. Die Syntax lautet „element:hover{box-shadow: horizontale Schattenposition, vertikaler Schatten“. position;}" .
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So verwenden Sie CSS3, um den Schatteneffekt zu erzielen, wenn die Maus schwebt
Wenn Sie in CSS den Schatteneffekt erzielen möchten, wenn die Maus schwebt, können Sie den Selektor „:hover“ und den verwenden „Box-Shadow“-Attribut.
Die Box-Shadow-Eigenschaft kann eine oder mehrere Dropdown-Schattenboxen festlegen.
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>
div{
width:200px;
height:200px;
background-color:pink;
}
div:hover{
box-shadow: 10px 5px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um beim Bewegen der Maus einen Schatteneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!