CSS3 box-shadow阴影效果详解

叁歲伎倆 2023-10-18 14:32 145阅读 0赞

在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。这样就可以模拟多边框效果了，首先看下box-shadow语法和参数。

[http://www.runoob.com/cssref/css3-pr-box-shadow.html][http_www.runoob.com_cssref_css3-pr-box-shadow.html]

### box-shadow语法： ###

box-shadow: h-shadow v-shadow blur spread color inset;

参数说明：

*  x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值。\{正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。\}
 *  y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值。\{同上\}
 *  blur：用于设置边框阴影半径大小。
 *  spread：扩展半径，设置阴影的尺寸；这个参数可选，缺省时值为0。
 *  color：设置阴影的颜色；
 *  inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。

### box-shadow实现多边框： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

代码：

div{
    				width: 10%;
    				height: 100px;
    				background: coral;
    				margin: 50px;
    				text-align: center;
    				float: left;
    				font-size: 12px;
    			}
    			#d1{
    				/*语法box-shadow：x-shadow水平偏移值  y-shadow垂直偏移值  blur阴影半径  spread扩展半径  color颜色  inset内阴影;*/
    				 /*rgba(0,0,0,.1)灰色*/
    				box-shadow: 0 0 0 10px rgba(0,0,0,.1),
    				            0 0 0 16px yellow,
    				            0 2px 5px 16px cyan;
    			}
    
    
         <div id="d1"></div>

#### 内阴影的使用: ####

![20190218111214536.png][]![20190218111246631.png][]

代码：

#d2{
    				box-shadow: 2px 2px 8px black inset;
    			}
    			
    			#d3{
    				box-shadow: -2px -2px 8px black inset;
    			}

说明：使用insert的时候offset-x,offset-y的值的意义和外阴影是相反的，正值是左边，上边。负值是右边，下边。

#### 外阴影的使用： ####

/*外部阴影*/
    			#d4{
    				box-shadow: 2px 2px 18px black ;
    			}

![20190218111735174.png][]

spread-radius阴影扩大缩小的作用：

/*把阴影的大小向外扩大了，左边和上边也出现了明显的阴影效果。*/
                #d5{
                    box-shadow: 4px 4px 8px 6px black ;
                }

![20190218111820994.png][]

使用rgba等有透明效果的阴影：

#d6{
    		box-shadow: 4px 4px 8px 6px rgba(0,0,0,.5 ) ;
    	}

![201902181122039.png][]

阴影效果会跟随元素的圆角也会显示圆角的阴影。并且外阴影效果会和外阴影合并，内阴影效果会和内阴影合并，外阴影效果不会和内阴影效果不会合并。

#d7{
    				 border-radius:8px;
                     box-shadow: 4px 4px 8px rgba(0,0,0,0.5),
                                 4px 5px 3px #05A623,
                                 inset 4px 4px 8px #000;
    	}

![20190218112312893.png][]

## box-shadow单边阴影实现： ##

也是要借助spread-radius参数来实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

源代码：

#d8{
    				/*box-shadow: 0 0 8px 6px rgba(0,0,0,.8 ) ;*/
    				 box-shadow: 8px 2px 2px -4px rgba(0,0,0,0.8);
    			}
    			#d9{
    				 box-shadow: 2px 8px 2px -4px rgba(0,0,0,0.8);
    			}
    			#d10{
    			
    				 box-shadow: 2px -8px 2px -4px rgba(0,0,0,0.8);
    			}
    			#d11{
    		
    				 box-shadow: -8px 2px 2px -4px rgba(0,0,0,0.8);
    			}
    			
    			#d12{
    				 box-shadow: 0 0 2px 4px rgba(0,0,0,0.8);
    			}

[http_www.runoob.com_cssref_css3-pr-box-shadow.html]: http://www.runoob.com/cssref/css3-pr-box-shadow.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190218110911688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190218111214536.png]: https://img-blog.csdnimg.cn/20190218111214536.png
[20190218111246631.png]: https://img-blog.csdnimg.cn/20190218111246631.png
[20190218111735174.png]: https://img-blog.csdnimg.cn/20190218111735174.png
[20190218111820994.png]: https://img-blog.csdnimg.cn/20190218111820994.png
[201902181122039.png]: https://img-blog.csdnimg.cn/201902181122039.png
[20190218112312893.png]: https://img-blog.csdnimg.cn/20190218112312893.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019021811245234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70