舉例詳解CSS中的text-shadow文字陰影效果使用

text-shadow
語法
- text-shadow: h-shadow v-shadow blur color;
實(shí)例
基礎(chǔ)的文本陰影效果:
- {
- text-shadow: 5px 5px 5px #FF0000;
- }
Eg:
- {text-shadow: h-shadow v-shadow blur color;}
附:E即Element,元素的意思。
兼容IE的寫法:
濾鏡語法:
Eg:
- {filter:shadow(Color=顏色值,Direction=數(shù)值,Strength=數(shù)值)}
Direction用于設(shè)定投影的主向,取值為0即零度(表示向上方向),45為右上,90為右,135為右下,180為下方,225為左下方,270為左方,315為左上方;Strength就是強(qiáng)度,類似于text-shadow中的blur值。
text-shadow的實(shí)例
CSS代碼:
- .demo {
- background: #666666;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- color: #fff;
- text-transform: uppercase;
- text-shadow: red 0 2px 0;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子2——改變陰影模糊半徑
CSS代碼:
- .demo {
- background: #666666;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- color: #fff;
- text-transform: uppercase;
- text-shadow: 0 0 20px red;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子3——輝光效果
CSS代碼:
- .demo {
- background: #666666;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- color: #fff;
- text-transform: uppercase;
- text-shadow:0 0 5px #fff,
- 0 0 10px #fff,
- 0 0 15px #fff,
- 0 0 40px #ff00de,
- 0 0 70px #ff00de;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子4——浮雕效果
CSS代碼:
- .demo {
- background: #666666;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- color: #ccc;
- text-transform: uppercase;
- text-shadow: 0 1px 1px red;
- }
HTML代碼:
預(yù)覽效果:
例子5——模糊效果
CSS代碼:
- .demo {
- background: #666666;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- text-transform: uppercase;
- color: transparent;
- text-shadow: 0 0 5px #fff;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子6——模糊的浮雕效果
CSS代碼:
- .demo {
- background: #666666;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- text-transform: uppercase;
- color: transparent;
- text-shadow:0 0 6px blue,
- -1px -1px #FFF,
- 1px -1px #444;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子7——文本的影子效果
這種效果需要注意:文字的前景色要比背景色暗,陰影顏色稍比背景色亮一點(diǎn)點(diǎn),如果陰影色太亮看起來會(huì)怪,如果太暗將沒有效果顯示。
CSS代碼:
- .demo {
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- text-transform: uppercase;
- color: #566F89;
- background: #C5DFF8;
- text-shadow: 1px 1px 0 #E4F1FF;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子8——環(huán)繞陰影效果
CSS代碼:
- .demo {
- background: #ccc;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- text-transform: uppercase;
- color: #fff;
- text-shadow: 1px 1px 0 #f96,
- -1px -1px 0 #f96;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子9——3D效果
CSS代碼:
- .demo {
- background: #ccc;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- text-transform: uppercase;
- color: #fff;
- text-shadow:1px 1px #d7e8f9,
- 2px 2px #d7e8f9,
- 3px 3px #d7e8f9,
- 4px 4px #d7e8f9,
- 5px 5px #d7e8f9,
- 6px 6px #d7e8f9;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子10——復(fù)古的文字效果
CSS代碼:
- .demo {
- background: #ccc;
- width: 224px;
- padding: 30px;
- font: bold 55px/100% "Lucida Sans";
- text-transform: uppercase;
- color: #eee;
- text-shadow:3px 3px 0 #ccc,
- 5px 5px 0 #eee;
- }
HTML代碼:
- <div class="demo">夢(mèng)龍小站</div>
預(yù)覽效果:
例子11——文字陰影IE版
CSS代碼:
- div {filter:shadow(Color=#000000,Direction=45,Strength=5);
- font:40px/60px "宋體";height:60px;}
HTML代碼:
- <div>夢(mèng)龍小站</div>
預(yù)覽效果:
相關(guān)文章
- CSS3作為新興的前端技術(shù)可以實(shí)現(xiàn)很多復(fù)雜變化的效果,比如文字描邊。這里主要用到text-shadow屬性,顧名思義就是為文字加上陰影效果,本文給大家介紹純CSS3代碼實(shí)現(xiàn)文字描2016-04-25
- 這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問題,需要的朋友可以參考下2016-03-07
CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-25- 下面小編就為大家?guī)硪黄P(guān)于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-08
CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
這篇文章主要介紹了CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-04-26CSS3 text-shadow實(shí)現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實(shí)現(xiàn)文字陰影效果的方法,豐富文字排版布局美化效果,感興趣的小伙伴們可以參考一下2016-02-24- 這篇文章主要介紹了用CSS的text-shadow制作超炫文字效果全攻略,文中給出了諸多陰影效果示例,超級(jí)推薦!需要的朋友可以參考下2015-07-23
- 前段時(shí)間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個(gè)新屬性的使用方法,這幾次繼續(xù)整理了有關(guān)于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細(xì)2012-12-25
CSS3基礎(chǔ)(RGBa、text-shadow、box-shadow、border-radius)
本文介紹CSS 3部分新屬性基礎(chǔ),包括RGBa、text-shadow、box-shadow、border-radius。這些屬性通常用來增強(qiáng)網(wǎng)頁(yè)布局和美譽(yù)度。(譯者注:在支持CSS3的瀏覽器如Firefox、Safa2012-11-13IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法
IE9瀏覽器確實(shí)不支持CSS3 text-shadow屬性,且根據(jù)最近的IE10 preview版的反饋,IE10瀏覽器也是不支持text-shadow屬性的2011-05-11