搜尋

首頁 >web前端 >css教學 >CSS3中text-shadow實作文字陰影效果（程式碼實例 ）

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

易达
易达原創
2020-06-05 22:27:132813瀏覽

本文目標：

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目錄,將圖片檔案存於此目錄，方便管理，素材有

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

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>

運行結果如下：

CSS3中text-shadow實作文字陰影效果（程式碼實例 ）到此為止，我們就實現了全部的需求

總結：

1、學習了text -shadow的用法，主要格式為：text-shadow: 水平偏移量垂直偏移量模糊度顏色

偏移量可正可負，正表示水平向左或垂直向下，負數則相反

希望本文能帶給大家一定的幫助，謝謝！ ！ ！

以上是CSS3中text-shadow實作文字陰影效果（程式碼實例 ）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）下一篇：CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）

相關文章

看更多