這篇文章主要整理一些css3實現的一些文字特效，分享給大家， 相信您看完會有不少的收貨哦！
一、css3 空心文字
<style> .hollow{ -webkit-text-stroke: 1px black; -webkit-text-fill-color : transparent; font-size: 30px; color:#fff; } </style> <div class="hollow">空心字/縷空效果:fly63.com</div> </body>效果如下：
空心字/縷空效果:fly63.com
除了使用-webkit-text-stroke和-webkit-text-fill-color以外，我們還可以利用text-shadow。
<style> .hollow{ text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; font-size: 30px; color:#fff; } </style> <div class="hollow">空心字/縷空效果:fly63.com</div>或者：
<style> .hollow{ text-shadow: 0 0 2px hsl(40, 28.57% , 28.82%),0 0 2px hsl(40, 28.57% , 28.82%), 0 0 2px hsl(40, 28.57% , 28.82%);/*多個疊加*/ font-size: 30px; color:#fff; } </style> <div class="hollow">空心字/縷空效果:fly63.com</div>設計塢https://www.wode007.com/sites/73738.html
二、css3立體文字
<style> .threesolid{ font-size: 30px; color:#fefefe; text-shadow:0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, .9); } </style> <div class="threesolid">立體文字效果:fly63.com</div>效果如下：
立體文字效果:fly63.com
立體效果原理：應用了CSS3中的text-shadow屬性，進行多次陰影設置，並設置不同的陰影色，從而達到一個立體的文字效果。
三、css3發光文字
<style> .light{ font-size: 30px; color: #fefefe; text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c; } </style> <div class="light">發光文字效果:fly63.com</div>效果如下：
發光文字效果:fly63.com
四、css3彩色文字
<style> .colortxt{ font-size: 30px; background: linear-gradient(to right, red, blue); -webkit-background-clip: text; color: transparent; } </style> <span class="colortxt">彩色漸變文字效果:fly63.com</span>效果如下：
彩色漸變文字效果:fly63.com
text的意思：就是以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。 所以，我們最后寫color: transparent; 讓文字為透明色，就是讓后面背景色顯示出來。
五、css3浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中隨處可見，由於陰影半徑很小，一般是 0 或 1px, 所以也適合小號的文本。在使用上一般遵循這個原則：深色文字淺色背景，用白陰影，淺色文字深色背景，用黑陰影。
text-shadow: 0 1px 0 #eee; 凹進效果
text-shadow: 0 -1px 0 #123; 凹進效果
text-shadow: 0 -1px 1px #eee; 凸出效果
text-shadow: 0 1px 1px #123; 凸出效果
六、css3紋理文字
<style> .grunge { position:relative; color: #f06369; background: #000; text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc; } .grunge span{ position:absolute; display:block; top:0; left:0; height:100%; width:100%; background:url("images/bg.png"); } </style> <div class="grunge">文字紋理效果:fly63.com<span></span></div>紋理文字效果是依靠一張圖片，配合其他文字效果制作出來，其原理來源於webkit-mask-image，把圖片當作一個遮罩，疊合文字。