溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是CSS3中使用text-shadow實現文字陰影效果，相信大部分人都還沒學會這個技能，為了讓大家學會，給大家總結了以下內容，話不多說，一起往下看吧。
使用純div+css實現以下效果
附加說明：
1、文字總共有4個分別是：Belive Yourself You Can
2、文字大小為86px
3、右邊文字和左邊文字的間距為20px
4、圖片大小 寬為：100px
5、陰影的水平平移量為15px,垂直平移量為2，模糊度為20，顏色為#333333
1、準備素材，新建images目錄,將圖片文件存于此目錄，方便管理，素材有
2、創建好index.html，寫好架構，架構如何分析呢
思路分析：
1、架構分成上下兩部分，上面部分顯示2個英文單詞，一個是Belive一個是Yourself,但是文字帶陰影效果
2、架構的下面部分也顯示2個英文單詞+一個圖片，英文單詞一個是You一個是Can，文字也是要帶陰影效果
根據分析，我們得出以下代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow實現文字陰影</title>
</head>
<body>
<div class="container">
<div class="top">
<strong class="word">Belive</strong>
<strong class="word rword">Yourself</strong>
</div>
<div class="bottom">
<strong class="word">You</strong>
<strong class="word rword">Can</strong>
<img src="images/youcan.png" />
</div>
</div>
</body>
</html>3、寫樣式，創建css目錄，里面新建文件index.css,css里面的思路分析如下
思路分析：
1、.container *
思路分析
1、為了設置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫入.container * 樣式內
所以index.css中添加代碼如下：
.container *{
padding:0;
margin:0;
}2、.word 文字
思路分析：
1、根據要求得知，文字大小為86px,且帶陰影效果，根據要求的陰影設置，于是轉成代碼為 text-shadow: 15px 2px 20px #333333;
所以index.css添加代碼如下
.word{
font-size: 86px;
text-shadow: 15px 2px 20px #333333;
}3、rword 右邊文字
思路分析：
1、根據要求得知，右邊文字和左邊文字的間距為20px，所以 margin-left:20px;
所以index.css添加代碼如下
.rword{
margin-left:20px;
}4、圖片設置
思路分析：
1、根據要求得知，寬=100px,然后它和左邊文字的間距為10px
所以index.css添加代碼如下
.bottom img{
margin-left:10px;
width:100px;
}到此為止，index.css的全部內容如下：
.container *{
padding:0;
margin:0;
}
.word{
font-size: 86px;
text-shadow: 15px 2px 20px #333333;
}
.rword{
margin-left:20px;
}
.bottom img{
margin-left:10px;
width:100px;
}接下來，將index.css引入index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow實現文字陰影</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="top">
<strong class="word">Belive</strong>
<strong class="word rword">Yourself</strong>
</div>
<div class="bottom">
<strong class="word">You</strong>
<strong class="word rword">Can</strong>
<img src="images/youcan.png" />
</div>
</div>
</body>
</html>運行結果如下：
到此為止，我們就實現了全部的需求
1、學習了text-shadow的用法，主要格式為：text-shadow: 水平偏移量 垂直偏移量 模糊度 顏色
偏移量可正可負，正表示水平向左或者垂直向下，負數則相反
看完這篇文章，你們學會CSS3中使用text-shadow實現文字陰影效果了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
