您當前位置：首頁 > web前端 > htmlcss > 純CSS3文字漸變內發光投影效果

純CSS3文字漸變內發光投影效果

來源：程序員人生發布時間：2014-04-15 14:17:39 閱讀次數：3228次

今天群上面同志們在討論css3內發光效果，自己也就研究一下，寫了個效果出來，涉及css3投影，漸變，蒙版，偽類等知識點，現在寫下設計思路，僅供參考。發個效果圖大家看先： &網

純CSS3文字 <wbr>漸變內發光投影效果ｌieｈｕｏ．ｎｅｔ

一般我們都是用css3的box-shadow來實現盒投影，用text-shadow來實現文字投影，box-shadow設置方型盒子投影，用raidus的話可以讓盒子產生圓角，看起來就很圓滑舒服，一般的寫法是這樣的：

/網

ｌiｅｈuｏ．ｎｅｔ

vｅｒｙｈｕｏ．ｃｏm

1px(水平方向偏移) 1px(垂直方向偏移) 5px(陰影羽化) #000(顏色); veｒyhuｏ．coｍ

當偏移量為負數時就向反方向偏移，試試就明白了，這里不貼圖。ｌiｅｈｕo．ｎｅｔ

這個是一般的投影效果，如果是內陰影，那么就加個“inset”屬性，寫法如下：

ｌieｈｕｏ．ｎｅｔ

veryhｕｏ．ｃom

這樣就變成了PS里面的內陰影，效果很贊，很實用，如果需要內發光效果，則背景底色深，投影顏色淺，這樣就會感覺是發光，而背景顏色深，投影顏色淺，這樣看起來就是投影了； wfuyu.com

不過群里面討論的是文字的投影內發光，上面的是順便提提而已，下面才是正題：

verｙｈuo.com

文字是用text-shadow來產生陰影，而且產生的時候能跟隨文字的輪廓投影，如下所示：

ｌiｅhｕｏ．ｎｅｔ

純CSS3文字 <wbr>漸變內發光投影效果

vｅrｙｈuｏ．ｃom

如果用box-shadow的話效果是這樣的：ｌieｈｕｏ．ｎｅｔ

純CSS3文字 <wbr>漸變內發光投影效果

ｌiｅｈｕｏ.ｎeｔ

ｌiｅｈuｏ．ｎｅｔ

會根據放文字容器的盒子來投影(我設定了容器的寬度200px，背景未設定顏色透明)，不會跟隨文字輪廓投影，效果不是我們所要的；

&網

然而text-shadow沒有inset屬性，這個就比較棘手了，怎么才能實現文字內投影，同時還有文字漸變？ｌiｅｈｕo．ｎｅｔ

一層一層來，一般ps處理文字效果都是一層層的剝離，先從文字內發光入手：ｌieｈｕｏ．ｎｅｔ

我寫了這么一個頁面試內發光，代碼如下：

ｌiｅｈｕｏ.ｎｅｔ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">body{ background:#CCCCCC;}.text{ font-size:100px; font-family:"微軟雅黑"; color:rgba(0,0,0,0); font-weight:bold; position:relative;text-shadow: 0px 0px 0px #000000;}.text:after{ content:"廣州-龍"; position:absolute; left:0px; text-shadow:0px 0px 3px #fff;}</style></head><body><div class="text">廣州-龍</div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>

&網

提示：可修改后代碼再運行!

wfuyu.com

效果圖如下： vｅｒｙｈｕｏ．ｃｏm

純CSS3文字 <wbr>漸變內發光投影效果