這篇文章給大家分享的是有關css3文字陰影效果如何實現的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 text-shadow屬性使用示例</title>
<style>
.t1{
text-shadow: 5px 5px 5px #029789;
font-size: 40px;
font-weight: bold;
color: white;
}
.t2{
text-shadow: -5px -5px 5px #1094f2;
font-size: 40px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div class="demo">
<p class="t1">text-shadow屬性使用示例1-文字陰影效果</p>
<p class="t2">text-shadow屬性使用示例2-文字陰影效果</p>
</div>
</body>
</html>上述代碼，我們通過瀏覽器訪問，效果如下截圖：
這樣看是不是字體已經有了立體感呢？那么大家有沒有發現示例1和示例2的不同處有哪些？其實顯而易見，示例1中的文字陰影部分是在文字的右下方！而示例2中的字體陰影是在文字的左上方！
這些效果都是因為css3中text-shadow樣式屬性！我們可以發現示例1中text-shadow的值分別是5px 5px 5px #029789;示例2中的值分別是-5px -5px 5px #1094f2;這四個值分別表示，x軸方向的偏移量、y軸的偏移量、模糊值、陰影顏色。那么導致陰影位置的不同是因為前兩個值的正負數值原因。
x軸為正值則表示往右偏移，為負值則往左，y軸為正值則表示往下偏移，為負值則往上，模糊值越大就越模糊。
那么了解了這些值的所屬含義，就能根據自己的喜好，隨意改變文字陰影效果。
感謝各位的閱讀！關于css3文字陰影效果如何實現就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
