CSS3中text-shadow實作文字陰影效果（程式碼實例 ）
- 易达原創
- 2020-06-05 22:27:132669瀏覽
本文目標：
1、掌握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/CSS3中text-shadow實作文字陰影效果（程式碼實例 ）" / alt="CSS3中text-shadow實作文字陰影效果（程式碼實例 ）" >
</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/CSS3中text-shadow實作文字陰影效果（程式碼實例 ）" / alt="CSS3中text-shadow實作文字陰影效果（程式碼實例 ）" >
</div>
</div>
</body>
</html>運行結果如下：
到此為止，我們就實現了全部的需求
總結：
1、學習了text -shadow的用法，主要格式為：text-shadow: 水平偏移量垂直偏移量模糊度顏色
偏移量可正可負，正表示水平向左或垂直向下，負數則相反
希望本文能帶給大家一定的幫助，謝謝！ ！ ！
以上是CSS3中text-shadow實作文字陰影效果（程式碼實例 ）的詳細內容。更多資訊請關注PHP中文網其他相關文章！