CSS3-盒子阴影

分手后的思念是犯贱 2023-06-02 09:15 171阅读 0赞

CSS3 新增了 `box-shadow` 样式属性用来给元素设置一个或多个下拉阴影的框；该属性可以设置多个属性值

语法：

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

属性值说明：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">h-shadow</td> 
   <td align="left">必需的值，用于设置水平阴影的位置，可以为负值（阴影方向原来方向相反）</td> 
  </tr> 
  <tr> 
   <td align="left">v-shadow</td> 
   <td align="left">必需的值，用于设置垂直阴影的位置，可以为负值</td> 
  </tr> 
  <tr> 
   <td align="left">blur</td> 
   <td align="left">用于设置元素阴影的模糊距离</td> 
  </tr> 
  <tr> 
   <td align="left">spread</td> 
   <td align="left">用于设置阴影的大小，为正值时元素四周都会增加阴影</td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">设置阴影的颜色</td> 
  </tr> 
  <tr> 
   <td align="left">inset</td> 
   <td align="left">将阴影设置为内阴影（默认为外阴影）</td> 
  </tr> 
 </tbody> 
</table>

示例：

.nav{ 
    	width: 200px;
    	height: 200px;
    	background: #ccc;
    }

设置 h-shadow、v-shadow：

box-shadow: 2px 2px;

![在这里插入图片描述][20191004130520579.png]  
继续设置 blur：

box-shadow: 2px 2px 5px;

![在这里插入图片描述][20191004130712736.png]  
继续设置 spread：

box-shadow: 2px 2px 5px 2px;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
继续设置 color：

box-shadow: 2px 2px 5px 2px green;

![在这里插入图片描述][20191004131022885.png]  
设置为内阴影 inset：

box-shadow: 2px 2px 5px 2px green inset;

![在这里插入图片描述][20191004131256994.png]  
当 h-shadow与v-shadow 为零，阴影为内阴影时元素四周都会有内阴影

box-shadow: 0px 0px 10px green inset;

![在这里插入图片描述][20191004131625204.png]  
可以同时给元素设置多个内外阴影多个阴影用逗号隔开即可

box-shadow: 
    	20px 20px 5px 5px tomato inset,
    	30px 30px 3px 2px blue inset,
    	20px 20px 5px 5px green,
    	30px 25px 5px 5px yellow;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]  
球：

div { 
    	width: 200px;
    	height: 200px;
    	background-color: #fff;
    	border-radius: 50%;
    	box-shadow: 27px -3px 95px 14px #000 inset;
    }

HTML:

![在这里插入图片描述][20200126145328624.png]

[20191004130520579.png]: /images/20230601/1be7f43af51c4eb5b5c2fbae7b3ac60c.png
[20191004130712736.png]: /images/20230601/96da3db97bac4e13b9d41ca152814dea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230601/b6da95146a4b4f10a6c059fd8e0e87dc.png
[20191004131022885.png]: /images/20230601/1f3a90ce6c094d28a090a0b01d9b2718.png
[20191004131256994.png]: /images/20230601/80cfb182a2c344ee9da6f7ce1d130ed2.png
[20191004131625204.png]: /images/20230601/5572975dfce1441aa6ff08a74c06e6d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/5618d6aea1e547fba5015c09051b5f22.png
[20200126145328624.png]: /images/20230601/5b7c5b80a5da415c98a8d47f251baced.png