CSS3如何實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字

這篇文章主要介紹了CSS3如何實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年的瑤海網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整瑤海建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“瑤海網(wǎng)站設(shè)計”,“瑤海網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

要做出這個效果，首先必須知道css的一個屬性：

text-shadow:水平位置垂直距離模糊距離陰影顏色;

水平位置和垂直位置的值可以為負(fù)值

可以使用兩組值來實現(xiàn)凹凸效果，中間用逗號“,”隔開

CSS3實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字

<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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3如何實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

標(biāo)題名稱：CSS3如何實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字
分享鏈接：http://muchs.cn/article14/gpjsde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站設(shè)計、App開發(fā)、微信小程序、虛擬主機

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

CSS3如何實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字

CSS3如何實現(xiàn)文字浮雕效果，鏤刻效果，火焰文字