移动端的box-shadow

时间:2022-07-28
本文章向大家介绍移动端的box-shadow，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!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>

随机文章
本站知识点必读
最近更新