CSS3中text-shadow實作文字陰影效果（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

CSS3中text-shadow實作文字陰影效果（程式碼實例）

易达

Jun 05, 2020 pm 10:27 PM

css3

本文目標：

1、掌握text-shadow的用法

問題：

使用純div css實現以下效果

CSS3中text-shadow實作文字陰影效果（程式碼實例）

附加說明：

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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/688/223/705/1591366888178376.png?x-oss-process=image/resize,p_40"  class="lazy"   / 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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/688/223/705/1591366888178376.png?x-oss-process=image/resize,p_40"  class="lazy"   / alt="CSS3中text-shadow實作文字陰影效果（程式碼實例 ）" >
    </div>
</div>
</body>
</html>

運行結果如下：

到此為止，我們就實現了全部的需求

總結：