Home > Article > Web Front-end > How to use css3 to achieve shadow effect when mouse hovers
How to use css3 to achieve shadow effect when mouse hovers
- WBOYOriginal
- 2021-12-14 18:26:396113browse
In CSS, you can use the ":hover" selector and the "box-shadow" attribute to achieve the shadow effect when the mouse is hovering. The syntax is "element:hover{box-shadow: horizontal shadow position vertical shadow Location;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to use css3 to achieve the shadow effect when the mouse is hovering
In css, if you want to achieve the shadow effect when the mouse is hovering, This can be achieved using the ":hover" selector and the "box-shadow" attribute.
The box-shadow property can set one or more drop-down shadow boxes.
The example is as follows:
<!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>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to use css3 to achieve shadow effect when mouse hovers. For more information, please follow other related articles on the PHP Chinese website!