CSS發光文字(光暈)特效-支持IE&firefox&chrome等瀏覽器

發表留言 人氣: 7432°c

使用CSS做出如同PS軟體的發光字(文字光暈)特效,在很多年前已經有了。

但是現在到2016年了,瀏覽器不再只是IE Only的天下了,還有Firefox、Chrome、Safari、Opera等瀏覽器。

以前運用的HTML、CSS代碼已經不再適用了,從而我們需要把代碼修改到可以兼容各大主流瀏覽器才算是成功的。

有可能新手不知道什麼是css做出來的,發光文字(文字光暈)特效!

不緊要,我們現在可以先看一看演示︰

應用在"文章標題“,在 IE All 瀏覽器的效果︰
前︰

後︰

應用在"文章標題“,在Firefox、Chrome、Safari、Opera瀏覽器的效果︰
前︰

後︰

應用在"用戶名稱或特殊名字“,在 IE All 瀏覽器的效果︰

應用在"用戶名稱或特殊名字“,在Firefox、Chrome、Safari、Opera瀏覽器的效果︰

代碼1︰請選其一
<style type="text/css">
.itext {filter: glow(color:blue, strength=2); color:white; font-weight:900; text-shadow: 1px 1px 5px blue;}
</style>
<div class="itext">文字</div>

代碼2︰請選其一
<div style="filter: glow(color:blue, strength=2); color:white; font-weight:900; text-shadow: 1px 1px 5px blue;">文字</div>

代碼解析︰
發光顏色 blue
文字顏色 white
文字粗細 900
發光/陰影範圍 2 (數值愈高光暈可視範圍愈大)

你可以使用工具測試代碼︰www.ifreesite.com/runcode.htm

你可以使用色碼表修改顏色︰www.ifreesite.com/color

相關文章:
CSS陰影光暈按鈕或發光圖片

標籤: