如何使用CSS3的box-shadow屬性的內(nèi)陰影？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、成都網(wǎng)站制作與策劃設(shè)計(jì),云夢網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:云夢等地區(qū)。云夢做網(wǎng)站價(jià)格咨詢:18980820575

一、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è)置對象的陰影的顏色）

屬性值描述:

1.陰影類型：此參數(shù)可選，默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影
2. X-offset:是指陰影水平偏移量,其值可正可負(fù)，正值，則陰影在對象的右邊，負(fù)值，陰影在對象的左邊
3. Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，正值，陰影在對象的底部，負(fù)值時(shí)，陰影在對象的頂部
4.陰影模糊半徑：此參數(shù)是可選，只能為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊
5. 陰影擴(kuò)展半徑：此參數(shù)可選，其值可為正負(fù)值，正值，則整個(gè)陰影都延展擴(kuò)大，反之，則縮小
6.陰影顏色：此參數(shù)可選，不設(shè)定任何顏色時(shí)，瀏覽器會取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數(shù)。
注：多層陰影，最內(nèi)層優(yōu)先級最高，之后依次降低。使用逗號“，”隔開。

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

舉例1：不設(shè)置X軸與Y軸，設(shè)置值陰影模糊半徑為15px, 它會在本身發(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;" /*下邊陰影*/ >

效果圖：

看完上述內(nèi)容，你們掌握如何使用CSS3的box-shadow屬性的內(nèi)陰影的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：如何使用CSS3的box-shadow屬性的內(nèi)陰影
本文來源：http://chinadenli.net/article10/pigjdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、電子商務(wù)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、移動網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)