textshadow(CSS中怎么使用text-shadow實現文字陰影效果)

text-shadow

語法

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

實例

基礎的文本陰影效果:

1. 
   

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子3&mdash;&mdash;輝光效果

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子4&mdash;&mdash;浮雕效果

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. }

HTML代碼:

預覽效果:

例子5&mdash;&mdash;模糊效果

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子6&mdash;&mdash;模糊的浮雕效果

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子7&mdash;&mdash;文本的影子效果

這種效果需要注意:文字的前景色要比背景色暗,陰影顏色稍比背景色亮一點點,如果陰影色太亮看起來會怪,如果太暗將沒有效果顯示。

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子8&mdash;&mdash;環繞陰影效果

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子9&mdash;&mdash;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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子10&mdash;&mdash;復古的文字效果

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. }

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <pclass="demo">夢龍小站</p>

預覽效果:

例子11&mdash;&mdash;文字陰影IE版

CSS代碼:

CSS Code復制內容到剪貼板

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

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

HTML代碼:

XML/HTML Code復制內容到剪貼板

1. <p>夢龍小站</p>

預覽效果:

關于CSS中怎么使用text-shadow實現文字陰影效果就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。