> 技术文档 > CSS3文本阴影特效全攻略

CSS3文本阴影特效全攻略

技术文档

CSS3文本 阴影 效果实现

下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。

设计思路

创建具有视觉吸引力的标题区域
提供多种文本阴影效果实例
显示对应的CSS代码以供参考
添加交互元素让用户自定义效果

实现代码

<!DOCTYPE html><html lang=\"zh-CN\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>CSS3文本阴影效果大全</title> <link href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap\" rel=\"stylesheet\"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: \'Open Sans\', sans-serif; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); color: #fff; min-height: 100vh; padding: 40px 20px; } .container { max-width: 1100px; margin: 0 auto; } header { text-align: center; margin-bottom: 50px; } h1 { font-family: \'Montserrat\', sans-serif; font-size: 3.5rem; margin-bottom: 15px; text-shadow:  0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.6); position: relative; display: inline-block; } h1::after { content: \"\"; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 150px; height: 4px; background: linear-gradient(90deg, transparent, gold, transparent); border-radius: 2px; } .subtitle { font-size: 1.2rem; max-width: 600px; margin: 0 auto; opacity: 0.9; line-height: 1.6; } .shadow-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 50px; } .example { background: rgba(20, 20, 30, 0.7); border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .example:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); } .example-title { font-size: 2.5rem; margin-bottom: 20px; text-align: center; min-height: 100px; display: flex; align-items: center; justify-content: center; } .example-code { background: rgba(15, 15, 25, 0.8); border-radius: 8px; padding: 15px; font-family: monospace; font-size: 0.95rem; line-height: 1.5; flex-grow: 1; overflow-x: auto; } .example-desc { margin-top: 15px; font-size: 0.95rem; opacity: 0.8; } .shadow-customizer { background: rgba(20, 20, 30, 0.7); border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); margin-bottom: 50px; } .customizer-title { text-align: center; font-size: 2rem; margin-bottom: 30px; text-shadow: 0 2px 10px rgba(0, 200, 255, 0.7); } .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .control-group { display: flex; flex-direction: column; } label { margin-bottom: 8px; font-weight: 600; } input[type=\"range\"] { width: 100%; } .color-picker { display: flex; gap: 10px; align-items: center; } input[type=\"color\"] { width: 40px; height: 40px; border: none; border-radius: 5px; cursor: pointer; } .preview { text-align: center; padding: 40px; margin: 20px 0; background: rgba(0, 0, 0, 0.3); border-radius: 10px; font-size: 3rem; font-weight: bold; } .code-output { background: rgba(15, 15, 25, 0.8); border-radius: 8px; padding: 20px; font-family: monospace; font-size: 1.1rem; text-align: center; } footer { text-align: center; padding: 20px; font-size: 0.9rem; opacity: 0.8; } @media (max-width: 768px) { h1 { font-size: 2.5rem; } .preview { font-size: 2rem; } } </style></head><body> <div class=\"container\"> <header> <h1>CSS3 文本阴影效果</h1> <p class=\"subtitle\">探索各种引人注目的文本阴影技术，学习如何实现这些效果并创建您自己的自定义样式。</p> </header> <section class=\"shadow-examples\"> <div class=\"example\"> <div class=\"example-title\" style=\"text-shadow: 3px 3px 0px #ff6b6b;\">简单投影</div> <div class=\"example-code\">text-shadow: 3px 3px 0px #ff6b6b;</div> <p class=\"example-desc\">基本投影效果，向右下角偏移，无模糊效果。</p> </div> <div class=\"example\"> <div class=\"example-title\" style=\"text-shadow: 0 0 10px #00eeff, 0 0 20px #00b3ff;\">霓虹灯效果</div> <div class=\"example-code\">text-shadow: 0 0 10px #00eeff, 0 0 20px #00b3ff;</div> <p class=\"example-desc\">多层阴影创造发光效果，常用于霓虹灯风格设计。</p> </div> <div class=\"example\"> <div class=\"example-title\" style=\"text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; color: #2c3e50;\">文字描边</div> <div class=\"example-code\">text-shadow: -1px -1px 0 white, <br>1px -1px 0 white, <br>-1px 1px 0 white, <br>1px 1px 0 white;</div> <p class=\"example-desc\">使用四个阴影围绕文字创建描边效果。</p> </div> <div class=\"example\"> <div class=\"example-title\" style=\"text-shadow: 2px 2px 4px rgba(0,0,0,0.5), 4px 4px 6px rgba(0,0,0,0.3), 6px 6px 8px rgba(0,0,0,0.15);\">3D立体效果</div> <div class=\"example-code\">text-shadow: 2px 2px 4px rgba(0,0,0,0.5),<br>4px 4px 6px rgba(0,0,0,0.3),<br>6px 6px 8px rgba(0,0,0,0.15);</div> <p class=\"example-desc\">多层阴影营造出立体感和深度。</p> </div> <div class=\"example\"> <div class=\"example-title\" style=\"text-shadow: 0 14px 10px rgba(0,0,0,0.15), 0 24px 2px rgba(0,0,0,0.1), 0 34px 30px rgba(0,0,0,0.1);\">长投影</div> <div class=\"example-code\">text-shadow: 0 14px 10px rgba(0,0,0,0.15),<br>0 24px 2px rgba(0,0,0,0.1),<br>0 34px 30px rgba(0,0,0,0.1);</div> <p class=\"example-desc\">柔和的垂直投影，创造漂浮文字效果。</p> </div> <div class=\"example\"> <div class=\"example-title\" style=\"text-shadow: 5px 5px 0px #ee5253, 10px 10px 0px #341f97; color: #ff9ff3;\">多彩层叠</div> <div class=\"example-code\">text-shadow: 5px 5px 0px #ee5253, <br>10px 10px 0px #341f97;</div> <p class=\"example-desc\">多层不同颜色的阴影创建有趣的视觉效果。</p> </div> </section> <section class=\"shadow-customizer\"> <h2 class=\"customizer-title\">自定义文本阴影</h2> <div class=\"controls\"> <div class=\"control-group\">  <label for=\"h-offset\">水平偏移 (px)</label>  <input type=\"range\" id=\"h-offset\" min=\"-20\" max=\"20\" value=\"5\"> </div> <div class=\"control-group\">  <label for=\"v-offset\">垂直偏移 (px)</label>  <input type=\"range\" id=\"v-offset\" min=\"-20\" max=\"20\" value=\"5\"> </div> <div class=\"control-group\">  <label for=\"blur\">模糊半径 (px)</label>  <input type=\"range\" id=\"blur\" min=\"0\" max=\"20\" value=\"3\"> </div> <div class=\"control-group\">  <label for=\"color\">阴影颜色</label>  <div class=\"color-picker\"> <input type=\"color\" id=\"color\" value=\"#ff6b6b\"> <span id=\"color-value\">#ff6b6b</span>  </div> </div> </div> <div class=\"preview\" id=\"custom-preview\">自定义文本阴影</div> <div class=\"code-output\"> text-shadow: <span id=\"code-output\">5px 5px 3px #ff6b6b</span>; </div> </section> <footer> <p>CSS3 文本阴影效果展示 | 使用 text-shadow 属性创建视觉吸引力</p> <p>text-shadow 语法：text-shadow: h-shadow v-shadow blur-radius color;</p> </footer> </div> <script> // 获取DOM元素 const hOffset = document.getElementById(\'h-offset\'); const vOffset = document.getElementById(\'v-offset\'); const blur = document.getElementById(\'blur\'); const color = document.getElementById(\'color\'); const colorValue = document.getElementById(\'color-value\'); const customPreview = document.getElementById(\'custom-preview\'); const codeOutput = document.getElementById(\'code-output\'); // 更新阴影颜色值显示 color.addEventListener(\'input\', function() { colorValue.textContent = this.value; updateShadow(); }); // 添加事件监听器 [hOffset, vOffset, blur].forEach(input => { input.addEventListener(\'input\', updateShadow); }); // 更新阴影效果 function updateShadow() { const h = hOffset.value + \'px\'; const v = vOffset.value + \'px\'; const b = blur.value + \'px\'; const c = color.value; const shadowValue = `${h} ${v} ${b} ${c}`; customPreview.style.textShadow = shadowValue; codeOutput.textContent = shadowValue; } // 初始化 updateShadow(); </script></body></html>

功能说明

这个页面展示了多种CSS3文本阴影效果，包括：

基本效果展示区：提供了6种不同的文本阴影示例
- 简单投影
- 霓虹灯效果
- 文字描边
- 3D立体效果
- 长投影效果
- 多彩层叠效果
自定义工具：用户可以实时调整以下参数：
- 水平偏移（左右移动阴影）
- 垂直偏移（上下移动阴影）
- 模糊半径（控制阴影的模糊程度）
- 阴影颜色（使用颜色选择器）
代码输出：实时显示当前阴影效果的CSS代码

设计特点

使用渐变背景创建现代化视觉效果
卡片式布局确保在各种设备上都能良好显示
悬特效提升交互体验
响应式设计适应不同屏幕尺寸
实时预览功能便于学习和测试

这个页面既展示了CSS3的强大文本阴影功能，也提供了实用的交互工具让用户可以立即体验各种效果。

电子秤使用教程