当前位置：首页 > news >正文

CSS3文本阴影特效全攻略

news 2025/7/25 11:51:21

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代码