---
title: "用CSS实现字体阴影的效果"
url: "https://yjyj.net/learn/3825.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2005-12-17T05:22:54+08:00"
updated_at: "2005-12-17T05:22:54+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战, 网页视觉设计"
summary: "本文讲清如何用早期 CSS Filter 的 DropShadow 与 Shadow 给字体做投影/阴影效果，解释颜色、偏移、方向等参数含义，并给出可直接套用的示例代码。适合想快速复现老式文字特效、理解网页视觉表现的实战参考。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 用CSS实现字体阴影的效果

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/3825.html) · 作者：小 虾 · 发布时间：2005-12-17

## 30 秒核心看点 (TL;DR)

- DropShadow 适合做偏移投影，重点看 Color、OffX、OffY 和 Positive 参数。
- Shadow 通过 Direction 控制八方向阴影，适合做更规整的文字暗影效果。
- 文章给出完整 CSS 与 HTML 示例，改颜色和数值就能直接试出不同视觉效果。

虽然对高手来说，有点过时了，但是有时候能用上的。
CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).
1、DropShadow
语法：{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}
Color 代表投影的颜色，格式为“#RRGGBB”
OffX 和 OffY 代表x和y方向的投影偏移量。必须用整数值，正数代表x轴的右方向和y轴的下方向。负值相反。
Positive 参数是一个布尔值。值为true(非0),那么就为任何的非透明像素建立可见的投影。如果值为false(0)，那么就为透明的像素部分建立可见的投影。
2、Shadow
语法：{FILTER:Shadow(Color=color,Direction=direction)}
Color 代表阴影的颜色，格式为“#RRGGBB”
Direction是设置投影的方向，按照顺时针方向进行，0度代表垂直向上，然后每45度为一个单位。默认值是向左的270度。共8个方向。
两种特效的用法，一起写了。
在CSS里定义类，第一种是投影，第二中是阴影。数值可以自己调整，上面有详细介绍。
.dropshadow { filter: DropShadow(Color=green, OffX=5, OffY=5, Positive=1); position: absolute; font-size: 14pt; font-weight: bolder; top: 20px; clip: rect( ); left: 20px}
.shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; clip: rect( )}
定义到字体。
dropshadow - 用CSS做投影效果
shadow - 用CSS做阴影效果
有喜欢的朋友可以放在自己的页面中看下效果颜色字体据自己喜好调用。

```

www.dodocn.com

dropshadow - [用CSS](http://www.dodocn.com)做投影效果

shadow - 用[CSS](http://www.suoxie.com/?css)做阴影效果

```

## 延伸问答与排错指南 (FAQ)

### DropShadow 和 Shadow 有什么区别？
DropShadow 更像“投影”，靠 OffX、OffY 控制阴影偏移，Positive 决定对不透明还是透明像素生效；Shadow 则是按 Direction 指定方向生成阴影，更适合做固定方向的文字暗影。

### 这类字体阴影效果怎么调得更自然？
先把颜色调成比文字更深但不要太黑，再把偏移量控制在 1 到 3 之间，避免影子过重。若想更柔和，可减小对比度并让阴影方向与页面光源保持一致。

### 示例代码能直接用在网页里吗？
可以参考思路直接改写，但要注意这是较早期的 CSS Filter 写法，实际使用时应先在目标环境里测试兼容性。若只想做文字阴影，建议根据页面效果微调字号、位置和颜色。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)