代码语言：javascript复制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none}
div{width: 200px;height: 200px;
position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black;
box-shadow:1px 1px 0px 1px red;
}
</style>
</head>
<body>
<div id='div1'></div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none}
div{width: 200px;height: 200px;
position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;background: black;
box-shadow:0px 20px 0px 0px #ccc;
transition:0.3s;
}
div:active{
transform:translateY(20px);
box-shadow:0px 0px 0px 0px #ccc;
}
</style>
</head>
<body>
<div id='div1'></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none}
div{width: 200px;height: 200px;
position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black;
box-shadow:30px -30px 10px 0px black;
transition:0.3s;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
document.οnmοusemοve=function(e)
{
var ev=e||event;
console.log(ev.clientX,ev.clientY);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
{margin: 0;padding: 0;list-style: none}
div{width: 200px;height: 200px;
position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black;
box-shadow:30px -30px 10px 0px black;}
</style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
max=30;
document.οnmοusemοve=function(e)
{
var ev=e||event;
var needX=ev.clientX/innerWidth*-60 30;
var needY=ev.clientY/innerHeight*-60 30;
div1.style.boxShadow=needX "px " needY "px 10px 0px black";
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none}
div{width: 200px;height: 200px;
position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black;
box-shadow:0px 0px 0px 0px black,inset -20px -20px 30px 10px black;
}
</style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
</script>
</body>
</html>
