CSS样式之box-shadow阴影

心已赠人 2022-04-22 22:36 221阅读 0赞

# box-shadow #

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

1、介绍box-shadow

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70][]

案例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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70 1][]

案例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>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70]: /images/20220326/c9a9642aba444fd58769242b16784322.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70 1]: /images/20220326/d1412dcb46b046e2911af917e9b3c5e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70 2]: /images/20220326/b2f13fb1e2b64dd5846e7a79834dd2b3.png