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的強大文本陰影功能，也提供了實用的交互工具讓用戶可以立即體驗各種效果。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/92537.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/92537.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/92537.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！