這篇文章主要介紹“css3中陰影的表示方法有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3中陰影的表示方法有哪些”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、成都網(wǎng)站營(yíng)銷、小程序App開(kāi)發(fā)等移動(dòng)開(kāi)發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為玻璃鋼雕塑等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開(kāi)發(fā)服務(wù)。

css3中陰影分為2類：1、文本陰影，設(shè)置語(yǔ)法“text-shadow:水平位置 垂直位置 模糊距離 顏色;”；2、盒子陰影，設(shè)置語(yǔ)法“box-shadow:水平位置 垂直位置 模糊距離 spread 顏色 inset;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3中陰影分為兩種：文本陰影text-shadow和盒子陰影box-shadow，這兩個(gè)屬性可以在不添加背景圖片的情況下實(shí)現(xiàn)陰影的效果，在我們美化網(wǎng)頁(yè)時(shí)提供了很大的便利。那么這兩個(gè)屬性分別怎么用呢？

1. text-shadow

該屬性的語(yǔ)法規(guī)范是text-shadow: 1px 1px 1px #666;

在講css陰影屬性之前我們先來(lái)了解一下陰影有關(guān)的常識(shí)。

陰影的產(chǎn)生是光照在物體上，會(huì)在背光的地方產(chǎn)生陰影。

如下圖，是像右和向下產(chǎn)生的陰影：

下圖是向上和向左的陰影

下面再來(lái)看text-shadow屬性，屬性包括四個(gè)值，第一個(gè)值是陰影的水平偏移量，第二個(gè)值表示垂直偏移量，第三個(gè)值表示陰影發(fā)散范圍，第四個(gè)值表示陰影顏色。

一，默認(rèn)向右和向下的陰影使用正值，向左和向上使用負(fù)值。

text-shadow: 1px 1px 1px #666;表示向右和向下偏移一個(gè)像素的陰影，text-shadow: -1px -1px 1px #666;表示向左和向上偏移的陰影。text-shadow: 0px 0px 1px #666;表示不偏移，這個(gè)時(shí)候四周會(huì)有同等的陰影，如下圖

二，多組屬性值可以用逗號(hào)隔開(kāi)

text-shadow: 1px 1px 1px #666，-1px -1px 1px #666;表示四周都有偏移一個(gè)像素的陰影。

利用text-shadow屬性我們可以制作精美的凹凸文字效果。

    
    
    


        
好好學(xué)習(xí)
        
天天向上

運(yùn)行如下：

2. box-shadow

box-shadow和文字陰影的屬性很相似，一個(gè)是給文字加陰影，一個(gè)是給容器加陰影。

box-shadow的六個(gè)值，如下：

• h-shadow 水平陰影的位置，值可以為負(fù)數(shù)（不可省略）

• v-shadow 垂直陰影的位置，值可以為負(fù)數(shù)（不可省略）

• blur 模糊的距離（可選）

• spread 陰影的距離（可選）

• color 陰影的顏色（可選）

• inset 將外部陰影(outset)改成內(nèi)部陰影（可選）

none 默認(rèn)值（box-shadow:none 可以取消邊框的陰影效果）

注釋：可向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由 （2~4） 個(gè)長(zhǎng)度值、1個(gè)可選的顏色值以及可選的 inset 關(guān)鍵詞來(lái)規(guī)定。省略長(zhǎng)度的值是 0。

實(shí)例：添加多個(gè)陰影樣式