溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS3 中怎么利用text-shadow實現文字陰影效果，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
CSS3設置文字陰影效果，對文字字體設置陰影效果，采用text-shadow樣式，本來在CSS2版本中也有此屬性，但在CSS3中文字陰影text-shadow再次被應用，豐富文字排版布局美化效果。
CSS3單詞與語法
CSS3單詞： text-shadow
語法結構：text-shadow: 5px 2px 6px black;
5px 代表著：陰影距離文字左5px顯示
2px 代表著：陰影距離文字上2px顯示
6px 代表著：陰影大小范圍
black 代表著：陰影顏色為黑色
例子：
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.All-orange {
font: normal 14px 微軟雅黑,sans-serif;
max-width: auto;
max-height: auto;
background-color: #f8f8f8;
padding: 30px 30px 20px 30px;
color: #666;
border-radius: 5px
}
.All-orange h2 {
font: normal 32px 微軟雅黑,sans-serif;
padding: 20px 0 20px 40px;
display: block;
margin: -30px -30px 10px -30px;
color: #FFF;
background-color: #0CF;
border-radius: 5px;
text-shadow:5px 2px 6px #000;
box-shadow: 5px 2px 6px #000;
}
.All-orange img {
float: left
}
.All-orange h2 img{
margin-top: -15px;
}
</style>
</head>
<body>
<div class="All-orange" id="all">
<h2><img src="../img/launcher_icon_.png" />
悲傷黑白棋
</h2>
</div>
</body>
</html>
關于CSS3 中怎么利用text-shadow實現文字陰影效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
