css3怎么實(shí)現(xiàn)字體凹陷凸出的特效

這篇文章主要介紹“css3怎么實(shí)現(xiàn)字體凹陷凸出的特效”，在日常操作中，相信很多人在css3怎么實(shí)現(xiàn)字體凹陷凸出的特效問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css3怎么實(shí)現(xiàn)字體凹陷凸出的特效”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

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

　　css3字體實(shí)現(xiàn)立體感

　　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;

　　}

　　PHP中文網(wǎng)

　　這里我們要對(duì)“PHP中文網(wǎng)”實(shí)現(xiàn)凹陷凸出的效果，并且使用了：hover 選擇器。

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

　　最終此段代碼效果如下圖：

　　當(dāng)鼠標(biāo)移至文字上效果如下圖，呈現(xiàn)字體凹陷效果：

　　當(dāng)鼠標(biāo)移開文字后效果如下圖，呈現(xiàn)字體凸出效果：

　　這里主要用到了text-shadow屬性。

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

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

到此，關(guān)于“css3怎么實(shí)現(xiàn)字體凹陷凸出的特效”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！