這篇文章給大家分享的是CSS3中使用text-shadow實現(xiàn)文字陰影效果，相信大部分人都還沒學(xué)會這個技能，為了讓大家學(xué)會，給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比山東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式山東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋山東地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

使用純div+css實現(xiàn)以下效果

附加說明：

1、文字總共有4個分別是：Belive Yourself You Can

2、文字大小為86px

3、右邊文字和左邊文字的間距為20px

4、圖片大小 寬為：100px

5、陰影的水平平移量為15px,垂直平移量為2，模糊度為20，顏色為#333333

具體操作如下：

1、準(zhǔn)備素材，新建images目錄,將圖片文件存于此目錄，方便管理，素材有

2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢

思路分析：

1、架構(gòu)分成上下兩部分，上面部分顯示2個英文單詞，一個是Belive一個是Yourself,但是文字帶陰影效果

2、架構(gòu)的下面部分也顯示2個英文單詞+一個圖片，英文單詞一個是You一個是Can，文字也是要帶陰影效果

根據(jù)分析，我們得出以下代碼

 



 


    

        Belive
        Yourself
    
    

        You
        Can
        
    

3、寫樣式，創(chuàng)建css目錄，里面新建文件index.css,css里面的思路分析如下

思路分析：

1、.container *

思路分析

1、為了設(shè)置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫入.container * 樣式內(nèi)

所以index.css中添加代碼如下：

.container *{
    padding:0;
    margin:0;
}

2、.word 文字

思路分析：

1、根據(jù)要求得知，文字大小為86px,且?guī)ш幱靶Ч鶕?jù)要求的陰影設(shè)置，于是轉(zhuǎn)成代碼為 text-shadow: 15px 2px 20px #333333;

所以index.css添加代碼如下

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

3、rword 右邊文字

思路分析：

1、根據(jù)要求得知，右邊文字和左邊文字的間距為20px，所以 margin-left:20px;

所以index.css添加代碼如下

.rword{
     margin-left:20px;
}

4、圖片設(shè)置

思路分析：

1、根據(jù)要求得知，寬=100px,然后它和左邊文字的間距為10px

所以index.css添加代碼如下

.bottom img{
    margin-left:10px;
    width:100px;
}

到此為止，index.css的全部內(nèi)容如下：

.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中

 



 


    

        Belive
        Yourself
    
    

        You
        Can
        
    

運行結(jié)果如下：

到此為止，我們就實現(xiàn)了全部的需求

總結(jié)：

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

偏移量可正可負(fù)，正表示水平向左或者垂直向下，負(fù)數(shù)則相反

看完這篇文章，你們學(xué)會CSS3中使用text-shadow實現(xiàn)文字陰影效果了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。