css中的阴影详解

在 CSS 中，阴影效果通常使用 box-shadow 和 text-shadow 来实现，它们分别适用于元素的框和文本。阴影是提升页面设计感和层次感的告急工具。下面，我会详细讲授这两个属性，并结合代码示例分析。
  
  
1. box-shadow

box-shadow 用于为元素的框添加阴影效果，语法如下：

1. box-shadow: h-offset v-offset blur spread color inset;

复制代码

• h-offset（水平偏移）：阴影相对于元素的水平位置。正值表现阴影在元素的右侧，负值表现阴影在左侧。
  
• v-offset（垂直偏移）：阴影相对于元素的垂直位置。正值表现阴影在元素的下方，负值表现阴影在上方。
  
• blur（含糊半径）：控制阴影的含糊水平，值越大，阴影越含糊。默以为 0，表现没有含糊。
  
• spread（扩展半径）：控制阴影的大小，正值表现阴影会扩展，负值表现阴影会收缩。
  
• color（颜色）：阴影的颜色，可以使用任何合法的颜色值（如 rgba, #hex, rgb 等）。
  
• inset（内阴影，可选）：表现阴影是内嵌在元素内部的。假如不指定，阴影会在元素外部。
  

示例

1. <div class="box-shadow-example">盒子阴影</div>
3. <style>
4.   .box-shadow-example {
5.     width: 200px;
6.     height: 100px;
7.     background-color: #4CAF50;
8.     color: white;
9.     line-height: 100px;
10.     text-align: center;
11.     box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
12.   }
13. </style>

复制代码

• box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);:
  
  
  
  • 10px：水平偏移 10 像素，阴影向右。
    
  • 10px：垂直偏移 10 像素，阴影向下。
    
  • 20px：含糊半径 20 像素，阴影会变得含糊。
    
  • 5px：扩展半径 5 像素，阴影会稍微增大。
    
  • rgba(0, 0, 0, 0.5)：阴影的颜色为半透明黑色。
    
  
  

2. text-shadow

text-shadow 用于为文本添加阴影效果，语法如下：

1. text-shadow: h-offset v-offset blur color;

复制代码

• h-offset（水平偏移）：阴影相对于文本的水平位置，正值向右偏移，负值向左偏移。
  
• v-offset（垂直偏移）：阴影相对于文本的垂直位置，正值向下偏移，负值向上偏移。
  
• blur（含糊半径）：控制阴影的含糊水平，值越大，阴影越含糊。
  
• color（颜色）：阴影的颜色。
  

示例

1. <h1 class="text-shadow-example">带阴影的文本</h1>
3. <style>
4.   .text-shadow-example {
5.     font-size: 50px;
6.     text-align: center;
7.     text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
8.   }
9. </style>

复制代码

• text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);:
  
  
  
  • 3px：水平偏移 3 像素，阴影向右。
    
  • 3px：垂直偏移 3 像素，阴影向下。
    
  • 5px：含糊半径 5 像素，阴影稍微含糊。
    
  • rgba(0, 0, 0, 0.3)：阴影的颜色为半透明黑色。
    
  
  

3. 多重阴影

box-shadow 和 text-shadow 都可以同时应用多个阴影，多个阴影使用逗号分隔。每个阴影的语法遵照相同的规则。
示例

1. <div class="multi-shadow-example">多重阴影效果</div>
3. <style>
4.   .multi-shadow-example {
5.     width: 200px;
6.     height: 100px;
7.     background-color: #ff6347;
8.     color: white;
9.     line-height: 100px;
10.     text-align: center;
11.     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.1);
12.   }
13. </style>

复制代码

• box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.1);:
  
  
  
  • 第一个阴影：偏移 5px 向右下方，含糊半径为 10px，半透明黑色。
    
  • 第二个阴影：偏移 -5px 向左上方，含糊半径为 10px，浅色阴影。
    
  
  

4. 内阴影

box-shadow 还可以应用内阴影（inset），它会使阴影出现在元素内部。
示例

1. <div class="inset-shadow-example">内阴影效果</div>
3. <style>
4.   .inset-shadow-example {
5.     width: 200px;
6.     height: 100px;
7.     background-color: #87cefa;
8.     color: black;
9.     line-height: 100px;
10.     text-align: center;
11.     box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);
12.   }
13. </style>

复制代码

• box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);:
  
  
  
  • inset：使阴影呈内阴影，阴影在元素内部。
    
  • 5px 5px：阴影向右下方偏移 5 像素。
    
  • 15px：含糊半径为 15 像素，阴影较为含糊。
    
  • rgba(0, 0, 0, 0.4)：阴影颜色为半透明黑色。
    
  
  

总结

• box-shadow 用于元素框的阴影，可以调整偏移、含糊、扩展和颜色，还可以设置内阴影。
  
• text-shadow 用于文本的阴影，告急控制文本的偏移、含糊和颜色。
  
• 可以通过逗号分隔来实现多个阴影效果。
  

使用阴影时要注意性能问题，过多的阴影大概影响页面渲染速率，尤其是在低性能设备上。得当使用阴影能有用增强页面的视觉层次感和设计感。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。