溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3如何實(shí)現(xiàn)字體凹陷凸出效果

發(fā)布時(shí)間：2020-09-26 11:01:13 來(lái)源：億速云 閱讀：182 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css3如何實(shí)現(xiàn)字體凹陷凸出效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)，常常會(huì)需要考慮到用戶體驗(yàn)，那么足夠美觀的網(wǎng)頁(yè)才能吸引住用戶。為了讓網(wǎng)頁(yè)內(nèi)容更加豐富好看，我們可能會(huì)使用ps做出很多特效，其實(shí)除了ps，利用css3屬性也能制作出各種好看的特效。

下面我們就給大家介紹一個(gè)css3實(shí)現(xiàn)字體凹陷凸出的特效方法，也就是使字體有立體感。

css字體實(shí)現(xiàn)凹陷凸出即立體感的代碼示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3字體實(shí)現(xiàn)立體感</title>
    <style>
        body {
            background: gray;
        }
        h2 {
            font-size: 200px;
            color: gray;
            text-shadow: 3px 3px 2px black,
            -3px -3px 2px white;         }
        h2:hover {
            text-shadow: 3px 3px 2px white,
            -3px -3px 2px black;
        }
    </style>
</head>
<body>
<div class="demo" >
</div>
<h2>
 億速云
</h2>
</body>
</html>

這里我們要對(duì)“億速云”實(shí)現(xiàn)凹陷凸出的效果，并且使用了:hover 選擇器。

:hover 選擇器表示用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。

text-shadow屬性：為字體添加陰影, 可以通過(guò)對(duì)text-shadow屬性設(shè)置相關(guān)的屬性值，來(lái)實(shí)現(xiàn)一些需要的字體陰影效果,減少了圖片的使用。

注：所有主流瀏覽器都支持 text-shadow 屬性。但是Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。

關(guān)于css3如何實(shí)現(xiàn)字體凹陷凸出效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手