当先锋百科网

首页 1 2 3 4 5 6 7

CSS样式之box-shadow阴影

box-shadow

CSS中的阴影样式，从简单到炫酷

1、介绍box-shadow

 案例1：

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>给边框设置阴影</title>
		<style>
			body{
				/*为了满足老夫的少女心,先来个粉红色背景*/
				background: pink;
			}
			div{
				width: 100px;
				height: 100px;
				margin: 200px;
				border: 1px solid #fff;
				/*给所有的div来个统一的样式,100*100的小白框框*/
			}
			/*分开看每个div的效果*/
			
			.div1{
				/*前面两位为阴影的x和y,x控制水平方向(为正值时阴影在右边,负值则在左边),
				y控制垂直方向(为正值时阴影在下边,负值则在上边)*/
				/*给div1设置右边和下边的阴影*/
				/*box-shadow:x y color;*/
				box-shadow: 10px 10px  #fff;
			}
			.div2{
				/*给div2设置左边和上边的阴影*/
				box-shadow: -10px -10px #fff;
			}
			.div3{
				/*box-shadow:x y blur color;*/				
				/*box-shadow的第三位数为设置阴影的模糊距离*/
				/*给它设置阴影的模糊距离*/
				box-shadow: 0px 0px 20px #fff;
			}
			.div4{
				/*box-shadow:x y blur spread color;*/
				/*box-shadow的第四位数为设置阴影的大小*/
				/*我的x和y的阴影都是0，阴影的模糊距离也是0 和阴影的大小是10px*/
				box-shadow: 0px 0px 0px 10px #fff ;
			}
			.div5{
				/*我的x和y的阴影都是10，阴影的模糊距离也是10 和阴影的大小是10px*/
				box-shadow: 10px 10px 20px 10px #fff ;
			}
			.div6{
				box-shadow:-10px 0px 10px white,   /*左边阴影*/ 
	                       0px -10px 10px cornflowerblue,  /*上边阴影*/ 
	                       10px 0px 10px darkseagreen,  /*右边阴影*/ 
	                       0px 10px 10px mediumpurple; /*下边阴影*/
			}
			.div7{
				/*box-shadow:x y blur spread inset color;*/
				box-shadow: 0px 0px 10px 0px inset red ;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			我是第1个，我的阴影在右边和下边
		</div>
		<div class="div2">
			我是第2个，我的阴影在左边和上边
		</div>
		<div class="div3">
			我是第3个，我有20px的模糊距离
		</div>
		<div class="div4">
			我是第4个，我有10px的阴影大小
		</div>
		<div class="div5">
			我是第5个，我的阴影在右边和下边，并且我有20px的模糊距离和阴影的大小是10px
		</div>
		<div class="div6">
			我是第6个，我不同的边框有不同的颜色
		</div>
		<div class="div7">
			我是第7个，我有内阴影
		</div>
	</body>
</html>

 

 

 

 

案例2：

卷边阴影

html：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的阴影</title>
		<style type="text/css">
			body {
				background: pink;
			}
			
			.box-shadow {
				width: 300px;
				line-height: 150px;
				position: relative;
				background: #ccc;
				margin: 100px auto;
				border-radius: 10px;
				text-align: center;
				color: pink;
			}
			
			.box-shadow:before,
			.box-shadow:after {
				content: "";
				position: absolute;
				z-index: -1;
				bottom: 13px;
				left: 10px;
				width: 50%;
				max-width: 150px;
				height: 20%;
				-webkit-box-shadow: 0 17px 15px rgba(125, 125, 125, 0.8);
				-moz-box-shadow: 0 17px 15px rgba(125, 125, 125, 0.8);
				box-shadow: 0 17px 15px rgba(125, 125, 125, 0.8);
				-webkit-transform: rotate(-5deg);
				-moz-transform: rotate(-5deg);
				-o-transform: rotate(-5deg);
				transform: rotate(-5deg);
			}
			
			.box-shadow:after {
				right: 10px;
				left: auto;
				-webkit-transform: rotate(5deg);
				-moz-transform: rotate(5deg);
				-o-transform: rotate(5deg);
				transform: rotate(5deg);
			}
		</style>
	</head>

	<body>
		<div class="box-shadow">我的阴影</div>
	</body>

</html>

效果：