移动端的box-shadow
移动端的box-shadow
贵哥的编程之路
发布于 2020-10-28 10:29:47
发布于 2020-10-28 10:29:47
<!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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-09-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读