這篇文章主要介紹了CSS3如何實現文字浮雕效果，鏤刻效果，火焰文字，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
要做出這個效果，首先必須知道css的一個屬性：
text-shadow:水平位置 垂直距離 模糊距離 陰影顏色;
水平位置和垂直位置的值可以為負值
可以使用兩組值來實現凹凸效果，中間用逗號“,”隔開
CSS3實現文字浮雕效果，鏤刻效果，火焰文字
<style>
body{
background: #ccc;
}
div{
font-size: 80px;
color: #ccc;
}
.tu{
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
.ao{
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
.fire{
/* text-align: center; */
font: bold 60px 微軟雅黑;
color: #F00;
padding: 30px;
text-shadow: 0 0 4px #FFF, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 10px #f80, 2px -25px 20px #f20;
}
</style><body> <!-- box-shadow --> <!-- text-shadow --> <!-- 浮雕 --> <!-- 鏤刻 --> <!-- 火焰文字 --> <div class="tu">凸起的文字</div> <div class="ao">凹下去的文字</div> <div class="fire">火焰文字</div> <!-- <div>TEXT SHADOW</div> --> </body>
感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3如何實現文字浮雕效果，鏤刻效果，火焰文字”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
