css3怎么實現字體凹陷凸出的特效

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

平陸網站建設公司成都創新互聯,平陸網站設計制作，有大型網站制作公司豐富經驗。已為平陸千余家提供企業網站建設服務。企業網站搭建\外貿網站建設要多少錢，請找那個售后服務好的平陸做網站的公司定做！

css字體實現凹陷凸出即立體感的代碼示例如下：

css3字體實現立體感

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中文網

這里我們要對“PHP中文網”實現凹陷凸出的效果，并且使用了：hover 選擇器。

：hover 選擇器表示用于選擇鼠標指針浮動在上面的元素。

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

當鼠標移至文字上效果如下圖，呈現字體凹陷效果：

當鼠標移開文字后效果如下圖，呈現字體凸出效果：

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

text-shadow屬性：為字體添加陰影， 可以通過對text-shadow屬性設置相關的屬性值，來實現一些需要的字體陰影效果，減少了圖片的使用。

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

到此，關于“css3怎么實現字體凹陷凸出的特效”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

新聞標題：css3怎么實現字體凹陷凸出的特效
文章地址：http://m.kartarina.com/article36/jeopsg.html

成都網站建設公司_創新互聯，為您提供服務器托管、網站排名、云服務器、小程序開發、面包屑導航、網站策劃

廣告

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