# 用CSS实现字体阴影的效果
- Link: https://yjyj.net/learn/3825.html
- Published: 2005-12-17T05:22:54+08:00
- Author: 小 虾
⚡ 生猛大蝦编辑部 · 30 秒核心看点
* 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
```
❓ 延伸问答与排错指南（FAQ）
DropShadow 和 Shadow 有什么区别？
DropShadow 更像“投影”，靠 OffX、OffY 控制阴影偏移，Positive 决定对不透明还是透明
像素生效；Shadow 则是按 Direction 指定方向生成阴影，更适合做固定方向的文字暗影。
这类字体阴影效果怎么调得更自然？
先把颜色调成比文字更深但不要太黑，再把偏移量控制在 1 到 3 之间，避免影子过重。若想
更柔和，可减小对比度并让阴影方向与页面光源保持一致。
示例代码能直接用在网页里吗？
可以参考思路直接改写，但要注意这是较早期的 CSS Filter 写法，实际使用时应先在目标
环境里测试兼容性。若只想做文字阴影，建议根据页面效果微调字号、位置和颜色。
📚 【[招数学习](https://yjyj.net/category/learn)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：
* [表格边框的css语法整理](https://yjyj.net/learn/3818.html)
* [比较漂亮的链接样式](https://yjyj.net/learn/3817.html)
* [CSS独门技巧大放送](https://yjyj.net/learn/3826.html)
* [滚动条样式设置](https://yjyj.net/learn/3827.html)
* 热门必读[css布局实例](https://yjyj.net/learn/3901.html)
* 热门必读[程序员漫游指南](https://yjyj.net/what/5830.html)