css3阴影box-shadow

超、凢脫俗 2023-10-04 15:02 32阅读 0赞

#### 文章目录 ####

*   *  语法
     *  使用控制变量法，学习
     *   *  注意 \`h跟v都是0\` 则做四周的阴影

--------------------

### 语法 ###

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

\*\*注意：\*\*boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>h-shadow</em></td> 
   <td align="left">必需的。水平阴影的位置。(<code>正右负左单位px</code>)</td> 
  </tr> 
  <tr> 
   <td align="left"><em>v-shadow</em></td> 
   <td align="left">必需的。垂直阴影的位置。(<code>正下负上单位px</code>)</td> 
  </tr> 
  <tr> 
   <td align="left"><em>blur</em></td> 
   <td align="left">可选。模糊距离</td> 
  </tr> 
  <tr> 
   <td align="left"><em>spread</em></td> 
   <td align="left">可选。阴影的大小</td> 
  </tr> 
  <tr> 
   <td align="left"><em>color</em></td> 
   <td align="left">可选。阴影的颜色。在<a href="https://www.runoob.com/cssref/css_colors_legal.aspx" rel="nofollow">CSS颜色值</a>寻找颜色值的完整列表</td> 
  </tr> 
  <tr> 
   <td align="left">inset</td> 
   <td align="left">可选。从外层的阴影（开始时）改变阴影内侧阴影</td> 
  </tr> 
 </tbody> 
</table>

### 使用控制变量法，学习 ###

*  `h-shadow`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]

*  `v-shadow`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 3]

*  `blur`  
    ![在这里插入图片描述][20210601125735509.gif]

#### 注意 `h跟v都是0` 则做四周的阴影 ####

--------------------

*  spread

> 阴影大小，单位px

![在这里插入图片描述][20210601125741757.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210601125414902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210601125418936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210601125500379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210601125507494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[20210601125735509.gif]: https://img-blog.csdnimg.cn/20210601125735509.gif
[20210601125741757.gif]: https://img-blog.csdnimg.cn/20210601125741757.gif