CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
我要評(píng)論本文實(shí)例為大家分享了CSS3千變?nèi)f化的文本陰影text-shadow效果實(shí)例，供大家參考，具體內(nèi)容如下
語法：
none|<length>|none|[<shadow>,]*<shadow>
或
none|<color>|[,<color>]*
取值簡(jiǎn)單說明：
表示顏色；
表示由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可為負(fù)值，指定陰影的水平延伸距離；
表示由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值，指定模糊效果的作用距離。如果僅僅需要模糊效果，將前兩個(gè)length全部設(shè)定為0即可。
示例：
- <style type="text/css">
- p{
- text-align:center;
- margin:0;
- font-family:helvetica,arial,sans-serif;
- color:#999;
- font-size:80px;
- font-weight:bold;
- text-shadow:0.1em 0.1em #333;//右下角陰影
- text-shadow:-0.1em -0.1em #333;//左上角陰影
- text-shadow:-0.1em 0.1em #333;//左下角陰影
- text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的陰影
- text-shadow:0.1em 0.1em 0.3em black;//定義文本陰影效果
- }
- </style>
**簡(jiǎn)單小結(jié)：**text-shadow屬性的第一個(gè)值表示水平位移；第二個(gè)值表示垂直位移，正值偏右或偏下；負(fù)值偏上或偏左；第三個(gè)值表示模糊半徑，該值可選；第四個(gè)值表示陰影的顏色，該值可選。
示例：通過陰影增加前景色和背景色的對(duì)比
- p{
- text-align:center;
- margin:150px auto;
- font-family:helvetica,arial,sans-serif;
- font-size:80px;
- font-weight:bold;
- color:#fff;//設(shè)置文字顏色
- text-shadow:0.1em 0.1em 0.3em black;//通過陰影增加前景色和背景色的對(duì)比
- }
總結(jié)：
陰影偏移由兩個(gè)<length> 值指定到文本的距離。第一個(gè)長(zhǎng)度值指定到文本右邊的水平距離，負(fù)值會(huì)把陰影放置在文本的左邊。第二個(gè)長(zhǎng)度值指定到文本下邊的垂直距離，負(fù)值會(huì)把陰影放置在文本的上邊。
在陰影偏移之后，可以指定一個(gè)模糊半徑。模糊半徑是一個(gè)長(zhǎng)度值，他指出了模糊效果的范圍。
在陰影效果的長(zhǎng)度值之前或之后，還可以指定一個(gè)顏色值。顏色值會(huì)被用陰影效果的基礎(chǔ)。如果沒有指定顏色，那么將使用color屬性值代替。
示例：模擬復(fù)雜的文本特效
- p{
- text-align:center;
- margin:0;
- padding:24px;
- font-family:helvetica,arial,sans-serif;
- font-size:80px;
- font-weight:bold;
- color:#000;//設(shè)置文字顏色
- background:#000;//設(shè)置背景顏色
- text-shadow:0 0 4px white,
- 0 -5px 4px #ff3,
- 2px -10px 6px #fd3,
- -2px -15px 11px #f80,
- 2px -25px 18px #f20;//使用陰影疊加出燃燒的文字特效
- }
注：每個(gè)陰影效果必須指定陰影偏移值，而模糊半徑和陰影顏色是可選參數(shù)，每個(gè)陰影之間用逗號(hào)隔開。
- p{
- text-align:center;
- margin:0;
- padding:24px;
- font-family:helvetica,arial,sans-serif;
- font-size:80px;
- font-weight:bold;
- color:#D1D1D1;
- background:#CCC;
- text-shadow:-1px -1px white,
- -1px -1px #333;//使用陰影疊加出立體的文字特效
- 1px 1px white,
- -1px -1px #444;//使用陰影疊加出凹體文字特效
- -1px 0 black,
- 0 1px black,
- 1px 0 black,
- 0 -1px black;//使用陰影疊加出文本描邊特效
- 0 0 0.2em #F87,
- 0 0 0.2em #F87;//使用陰影疊加出文本外發(fā)光特
- }
以上就是關(guān)于實(shí)現(xiàn)文本陰影的前篇，下面還有精彩內(nèi)容不要錯(cuò)過。
相關(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 text-shadow實(shí)現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實(shí)現(xiàn)文字陰影效果的方法，豐富文字排版布局美化效果，感興趣的小伙伴們可以參考一下2016-02-24- 這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運(yùn)用是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-19
- 這篇文章主要介紹了用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ù)度。（譯者注：在支持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