box-shadow-demo.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>box-shadow</title>
	<style type="text/css">
	p,div{
		margin:0px;
		border:none;
		padding:0px;
	}
	h1,h3{
		text-align:center;
	}
	.main{
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}
	.box{
		width:150px;
		height:150px;
		margin:50px;
		background: #ccc;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-content:center;
		justify-content: center;
	}
	.border{
		border:5px solid #ff0;
	}

	.shadow_1{
		-moz-box-shadow:5px 5px 5px 5px #f33;
		-webkit-box-shadow:5px 5px 5px 5px #f33;
		box-shadow: 5px 5px 5px 5px #f33;
	}
	.shadow_2{
		-moz-box-shadow:5px 5px 5px 5px #f33;
		-webkit-box-shadow:5px 5px 5px 5px #f33;
		box-shadow:5px 5px 5px 5px #f33;
	}
	.shadow_3{
		-moz-box-shadow: inset 5px 5px 5px 5px #f33;
		-webkit-box-shadow: inset 5px 5px 5px 5px #f33;
		box-shadow: inset 5px 5px 5px 5px #f33;
	}
	.shadow_4{
		-moz-box-shadow: 0px 0px 5px 5px #f33;
		-webkit-box-shadow: 0px 0px 5px 5px #f33;
		box-shadow: 0px 0px 5px 5px #f33;
	}
	.shadow_5{
		-moz-box-shadow: -5px -5px 5px 5px #f33;
		-webkit-box-shadow: -5px -5px 5px 5px #f33;
		box-shadow: -5px -5px 5px 5px #f33;
	}
	.shadow_6{
		-moz-box-shadow:0px 0px 5px 5px #f33;
		-webkit-box-shadow:0px 0px 5px 5px #f33;
		box-shadow:0px 0px 5px 5px #f33;
	}
	.shadow_7{
		-moz-box-shadow:0px 0px 0px 5px #f33;
		-webkit-box-shadow:0px 0px 0px 5px #f33;
		box-shadow:0px 0px 0px 5px #f33;
	}
	.shadow_8{
		-moz-box-shadow:0px 0px -5px 5px #f33;
		-webkit-box-shadow:0px 0px -5px 5px #f33;
		box-shadow:0px 0px -5px 5px #f33;
	}
	.shadow_9{
		-moz-box-shadow: 0px 0px 5px 0px #f33;
		-webkit-box-shadow: 0px 0px 5px 0px #f33;
		box-shadow: 5px 5px 5px 0px #f33;
	}
	.shadow_10{
		-moz-box-shadow: 5px 5px 5px -5px #f33;
		-webkit-box-shadow: 5px 5px 5px -5px #f33;
		box-shadow: 5px 5px 5px -5px #f33;
	}
	.shadow_11{
		-moz-box-shadow:inset 0px 0px 5px 5px #f33;
		-webkit-box-shadow:inset 0px 0px 5px 5px #f33;
		box-shadow:inset 0px 0px 5px 5px #f33;
	}
	.shadow_12{
		-moz-box-shadow: inset -5px -5px 5px 5px #f33;
		-webkit-box-shadow: inset -5px -5px 5px 5px #f33;
		box-shadow: inset -5px -5px 5px 5px #f33;
	}
	.shadow_13{
		-moz-box-shadow:5px 5px 5px 5px #f33;
		-webkit-box-shadow:5px 5px 5px 5px #f33;
		box-shadow:5px 5px 5px 5px #f33;
	}
	.shadow_14{
		-moz-box-shadow: inset 5px 5px 5px 5px #f33;
		-webkit-box-shadow: inset 5px 5px 5px 5px #f33;
		box-shadow: inset 5px 5px 5px 5px #f33;
	}
	.shadow_15{
		-moz- box-shadow: -5px 0 5px 0 #6600FF, /*左边阴影*/
   		0 -5px 5px 0 #9900FF, /*顶部阴影*/
   		0 5px 5px 0 #CC00FF, /*底部阴影*/
   		5px 0 5px 0 #FF00FF; /*右边阴影*/
   		-webkit- box-shadow: -5px 0 5px 0 #6600FF, /*左边阴影*/
   		0 -5px 5px 0 #9900FF, /*顶部阴影*/
   		0 5px 5px 0 #CC00FF, /*底部阴影*/
   		5px 0 5px 0 #FF00FF; /*右边阴影*/
		 box-shadow: -5px 0 5px 0 #f00, /*左边阴影*/
   		0 -5px 5px 0 #0f0, /*顶部阴影*/
   		0 5px 5px 0 #ff0, /*底部阴影*/
   		5px 0 5px 0 #f0f; /*右边阴影*/
	}
	.shadow_16{
		-moz-box-shadow: -5px 0 5px 0 #6600FF inset, /*左边阴影*/
   		0 -5px 5px 0 #9900FF inset, /*顶部阴影*/
   		0 5px 5px 0 #CC00FF inset, /*底部阴影*/
   		5px 0 5px 0 #FF00FF inset; /*右边阴影*/
   		-webkit-box-shadow: -5px 0 5px 0 #6600FF inset, /*左边阴影*/
   		0 -5px 5px 0 #9900FF inset, /*顶部阴影*/
   		0 5px 5px 0 #CC00FF inset, /*底部阴影*/
   		5px 0 5px 0 #FF00FF inset; /*右边阴影*/
		box-shadow: 5px 0 5px 0 #f00 inset, /*左边阴影*/
   		0 5px 5px 0 #0f0 inset, /*顶部阴影*/
   		0 -5px 5px 0 #ff0 inset, /*底部阴影*/
   		-5px 0 5px 0 #f0f inset; /*右边阴影*/
	}
	.shadow_17{
		-moz-box-shadow: 0 0 0 3px #FFFF66,
		0 0 0 6px #FFCC66,
		0 0 0 9px #FF9966,
		0 0 0 12px #FF6666,
		0 0 0 15px #FF3366;	
		-webkit-box-shadow: 0 0 0 3px #FFFF66,
		0 0 0 6px #FFCC66,
		0 0 0 9px #FF9966,
		0 0 0 12px #FF6666,
		0 0 0 15px #FF3366;	
		box-shadow: 0 0 0 3px #FFFF66,
		0 0 0 6px #FFCC66,
		0 0 0 9px #FF9966,
		0 0 0 12px #FF6666,
		0 0 0 15px #FF3366;	
	}
	.shadow_18{
		line-height: 150px;
		border-radius: 100px;
		-moz-box-shadow: 0 0 50px 10px #FF0000,
		0 0 50px 20px #FF6600,
		0 0 50px 40px #FFFF00;
		-webkit-box-shadow: 0 0 50px 10px #FF0000,
		0 0 50px 20px #FF6600,
		0 0 50px 40px #FFFF00;
		box-shadow: 0 0 50px 10px #FF0000,
		0 0 50px 20px #FF6600,
		0 0 50px 40px #FFFF00;
	}

	.box2 {
		width: 300px;
		height: 100px;
		background: #ccc;
		border-radius: 10px;
		margin: 10px;
	}

	.shadow {
		position: relative;
		max-width: 270px;
		box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
					0px 0px 20px rgba(0,0,0,0.1) inset;
	}
	.shadow::before,
	.shadow::after{
	   content:"";
	   position:absolute;
	   z-index:-1;
	   bottom:15px;
	   left:10px;
	   width:50%;
	   height:20%;
	   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	   transform:rotate(-3deg);
	}

	.shadow::after{
	   right:10px;
	   left:auto;
	   transform:rotate(3deg);
	 }

	 .box3{
	 	width:300px;
	 	height:200px;
	 	    position: relative;
    display: inline-block;
	 }
	 .box3::before{
	 	content:"";
	 	position: absolute;
	 	width:100%;
	 	height:100%;
	 	-moz-box-shadow:inset 0 0 5px 5px #3333FF;
	    -webkit-box-shadow: inset 0 0 5px 5px #3333FF;
	    box-shadow: inset 0 0 5px 5px #3333FF;
	 }

	 .btn1{
	 	margin-top: 50px;
	 	background: rgb(42, 171, 160);
	    border: none;
	    color: #fff;
	    width: 240px;
	    height: 50px;
/* 	  box-shadow:4px 0 4px rgb(33, 135, 126) inset, 左边阴影
0 4px 4px rgb(33, 135, 126) inset,
 0 -4px 4px rgb(145, 224, 217) inset, 底边阴影
 -4px 0 4px rgb(145, 224, 217) inset 右边阴影 */
	  box-shadow: -4px 0 2px rgb(145, 224, 217) inset, /* 右边阴影 */
	  	 4px 0 2px rgb(33, 135, 126) inset, /* 左边阴影 */
	  	 0 -4px 2px rgb(145, 224, 217) inset, /* 底边阴影 */
	  	 0 4px 2px rgb(33, 135, 126) inset;
	 }
	</style>
</head>
<body>
	<header>
		<h1>box-shadow demo</h1>
	</header>
	<h2>基础演示</h2>
	<div class="main">
		<div class="box shadow_1">
				<p>x,y 偏移为正数</p>
				<p>5px 5px 5px 5px #f33</p>
		</div>
		<div class="box shadow_4">
				<p>x,y 偏移为0</p>
				<p>0px 0px 5px 5px #f33</p>
		</div>
		<div class="box shadow_5">
				<p>x,y 偏移为负数</p>
				<p>-5px -5px 5px 5px #f33</p>
		</div>
		<div class="box shadow_6">
				<p>模糊值为正数</p>
				<p>0px 0px 5px 5px #f33</p>
		</div>
		<div class="box shadow_7">
				<p>模糊值为0</p>
				<p>0px 0px 0px 5px #f33</p>
		</div>
		<div class="box shadow_8">
				<p>模糊值为负数</p>
				<p><b>(错误的写法)</b></p>
				<p>0px 0px -5px 5px #f33</p>
		</div>
		<div class="box shadow_9">
				<p>阴影长度为0</p>
				<p>5px 5px 5px 0px #f33</p>
		</div>
		<div class="box shadow_10">
				<p>阴影长度为负数</p>
				<p>5px 5px 5px -5px #f33</p>
		</div>
		<div class="box shadow_2">
				<p>阴影长度为正数</p>
				<p>5px 5px 5px 5px #f33</p>
		</div>
		<div class="box shadow_3">
				<p>内阴影x,y为正数</p>
				<p>inset 5px 5px 5px 5px #f33</p>
		</div>
		<div class="box shadow_11">
				<p>内阴影x,y为0</p>
				<p>inset 0px 0px 5px 5px #f33</p>
		</div>
		<div class="box shadow_12">
				p{内阴影x,y为负数}
				<p>inset -5px -5px 5px 5px #f33</p>
		</div>
		<div class="box border shadow_13">
				<p>有边框的外阴影</p>
		</div>
		<div class="box border shadow_14">
				<p>有边框的内阴影</p>
		</div>
	</div>
	<h2>多重阴影演示</h2>
	<div class="main">
		<div class="box shadow_15">
			
		</div>
		<div class="box shadow_16">
		
		</div>
		<div class="box shadow_17">
				<p>模拟多层边框</p>渐变边框</p>
		</div>
		<div class="box shadow_18">
				<p> 渐变阴影效果</p>

		</div>
		<div class="box" style="background: #fff;">
			<input type="button" class="btn1" value="按钮">
		</div>
	</div>
	<h2> 伪元素::before和::after</h2>
	<div class="main">
		<div class="box2 shadow"></div>
	</div>
</body>
</html>