溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css3如何實現字體凹陷凸出效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
我們在設計網頁時，常常會需要考慮到用戶體驗，那么足夠美觀的網頁才能吸引住用戶。為了讓網頁內容更加豐富好看，我們可能會使用ps做出很多特效，其實除了ps，利用css3屬性也能制作出各種好看的特效。
下面我們就給大家介紹一個css3實現字體凹陷凸出的特效方法，也就是使字體有立體感。
css字體實現凹陷凸出即立體感的代碼示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3字體實現立體感</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>這里我們要對“億速云”實現凹陷凸出的效果，并且使用了:hover 選擇器。
:hover 選擇器表示用于選擇鼠標指針浮動在上面的元素。
text-shadow屬性：為字體添加陰影, 可以通過對text-shadow屬性設置相關的屬性值，來實現一些需要的字體陰影效果,減少了圖片的使用。
注：所有主流瀏覽器都支持 text-shadow 屬性。但是Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。
關于css3如何實現字體凹陷凸出效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
