text-shadow

语法

1. text-shadow:h-shadowv-shadowblurcolor;

实例

基础的文本阴影效果:

2. {text-shadow:5px5px5px#FF0000;}

Eg:

1. {text-shadow:h-shadowv-shadowblurcolor;}

附:E即Element,元素的意思。

兼容IE的写法:

滤镜语法:

Eg:

1. {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;Strength就是强度,类似于text-shadow中的blur值。

text-shadow的实例
CSS代码:

.demo{background:#666666;width:224px;padding:30px;font:bold55px/100%"LucidaSans";color:#fff;text-transform:uppercase;text-shadow:red02px0;}

HTML代码:

1. <pclass="demo">梦龙小站</p>

例子2——改变阴影模糊半径

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#666666;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. color:#fff;

7. text-transform:uppercase;

8. text-shadow:0020pxred;

9. }

例子3——辉光效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#666666;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. color:#fff;

7. text-transform:uppercase;

8. text-shadow:005px#fff,

9. 0010px#fff,

10. 0015px#fff,

11. 0040px#ff00de,

12. 0070px#ff00de;

13. }

例子4——浮雕效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#666666;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. color:#ccc;

7. text-transform:uppercase;

8. text-shadow:01px1pxred;

9. }

例子5——模糊效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#666666;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. text-transform:uppercase;

7. color:transparent;

8. text-shadow:005px#fff;

9. }

例子6——模糊的浮雕效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#666666;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. text-transform:uppercase;

7. color:transparent;

8. text-shadow:006pxblue,

9. -1px-1px#FFF,

10. 1px-1px#444;

11. }

例子7——文本的影子效果

这种效果需要注意:文字的前景色要比背景色暗,阴影颜色稍比背景色亮一点点,如果阴影色太亮看起来会怪,如果太暗将没有效果显示。

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. width:224px;

3. padding:30px;

4. font:bold55px/100%"LucidaSans";

5. text-transform:uppercase;

6. color:#566F89;

7. background:#C5DFF8;

8. text-shadow:1px1px0#E4F1FF;

9. }

例子8——环绕阴影效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#ccc;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. text-transform:uppercase;

7. color:#fff;

8. text-shadow:1px1px0#f96,

9. -1px-1px0#f96;

10. }

例子9——3D效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#ccc;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. text-transform:uppercase;

7. color:#fff;

8. text-shadow:1px1px#d7e8f9,

9. 2px2px#d7e8f9,

10. 3px3px#d7e8f9,

11. 4px4px#d7e8f9,

12. 5px5px#d7e8f9,

13. 6px6px#d7e8f9;

14. }

例子10——复古的文字效果

CSS代码:

CSS Code复制内容到剪贴板

1. .demo{

2. background:#ccc;

3. width:224px;

4. padding:30px;

5. font:bold55px/100%"LucidaSans";

6. text-transform:uppercase;

7. color:#eee;

8. text-shadow:3px3px0#ccc,

9. 5px5px0#eee;

10. }

例子11——文字阴影IE版

CSS代码:

CSS Code复制内容到剪贴板

1. p{filter:shadow(Color=#000000,Direction=45,Strength=5);

2. font:40px/60px"宋体";height:60px;}

关于CSS中怎么使用text-shadow实现文字阴影效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。