CSS里面的屬性很多，有些屬性長(zhǎng)時(shí)間不用，就容易忘，尤其是那種需要設(shè)置多個(gè)值的屬性。比如：box-shadow，每次使用CSS3里的box-shadow,都記不清box-shadow怎么使用，都要查閱資料才能實(shí)現(xiàn)對(duì)應(yīng)的效果,現(xiàn)在總結(jié)一下,box-shadow的使用方法以及box-shadow內(nèi)陰影的使用，方便以后查看。

一、box-shadow語法

box-shadow: none | inset（可選值，不設(shè)置，為外投影，設(shè)置，為內(nèi)投影） x-offset（陰影水平偏移量，正方向?yàn)閞ight） y-offset（陰影垂直偏移量，正方向?yàn)閎ottom） blur-radius（陰影模糊半徑，為正，0為無模糊效果，值越大，越模糊） spread-radius（陰影擴(kuò)展半徑，可正可負(fù)） color（設(shè)置對(duì)象的陰影的顏色）

屬性值描述:

1.陰影類型：此參數(shù)可選，默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影

2. X-offset:是指陰影水平偏移量,其值可正可負(fù)，正值，則陰影在對(duì)象的右邊，負(fù)值，陰影在對(duì)象的左邊

3. Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，正值，陰影在對(duì)象的底部，負(fù)值時(shí)，陰影在對(duì)象的頂部

4.陰影模糊半徑：此參數(shù)是可選，只能為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊

5. 陰影擴(kuò)展半徑：此參數(shù)可選，其值可為正負(fù)值，正值，則整個(gè)陰影都延展擴(kuò)大，反之，則縮小

6.陰影顏色：此參數(shù)可選，不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數(shù)。

**注：**多層陰影，最內(nèi)層優(yōu)先級(jí)最高，之后依次降低。使用逗號(hào)“，”隔開。

二、box-shadow的實(shí)際運(yùn)用

舉例1：不設(shè)置X軸與Y軸，設(shè)置值陰影模糊半徑為15px, 它會(huì)在本身發(fā)生作用 半徑范圍，顏色。

box-shadow: 0 0 15px #f00;

效果圖：

舉例2： X軸與Y軸設(shè)為正值（正值 X軸向右 Y軸向下）

box-shadow:4px 4px 15px #f00;

效果圖：

舉例3：box-shadow：inset 即box-shadow內(nèi)部陰影，與上面寫法相同 唯一不同的是添加了一個(gè)inset

box-shadow:0 0 15px #f00 inset;

效果圖：

舉例4：設(shè)置正方形的四邊顏色都不一樣，但是陰影模糊半徑都為10px

box-shadow:-10px 0px 10px red, /左邊陰影/

0px -10px 10px black, /上邊陰影/

10px 0px 10px green, /右邊陰影/

0px 10px 10px blue;" /下邊陰影/ >

效果圖：

以上介紹了CSS3里的box-shadow怎么使用，box-shadow：inset內(nèi)部陰影怎么使用，以及box-shadow的實(shí)際運(yùn)用。至于box-shadow周圍設(shè)置什么樣的效果，還要看具體要求。

到此這篇關(guān)于CSS3里box-shadow屬性的使用方法示例詳解的文章就介紹到這了,更多相關(guān)CSS3 box-shadow屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論