box-shadow:none|shadow
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),耒陽(yáng)企業(yè)網(wǎng)站建設(shè),耒陽(yáng)品牌網(wǎng)站建設(shè),網(wǎng)站定制,耒陽(yáng)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,耒陽(yáng)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
它的值包括?6?個(gè)參數(shù)：陰影類型，X軸位移，Y軸位移，陰影大小，陰影擴(kuò)展和陰影顏色。此?6?個(gè)參數(shù)可以有選擇地省略。
瀏覽器兼容性
Webkit支持：-webkit-box-shadow
Mozilla支持：-moz-box-shadow
IE9支持：box-shadow
IE8及以前：不支持
實(shí)用實(shí)例
簡(jiǎn)單效果:
img{
height:300px;
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
虛陰影效果:
img{
height:300px;
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
漸變陰影效果:
img{
height:300px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
帶光暈效果
img{
height:300px;
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
內(nèi)陰影效果
img{
height:300px;
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
}
彩色陰影
img{
height:300px;
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
}
我們?cè)谥谱骶W(wǎng)頁(yè)的時(shí)候可以用CSS3添加邊框，那么如果要給邊框添加陰影該怎么做呢？下面我給大家分享一下。
工具/材料
SublimeText
首先打開(kāi)Sublime Text軟件，新建一個(gè)HTML文檔，如下圖所示
然后在html文檔的Body區(qū)域插入一個(gè)div，如下圖所示
接下來(lái)給div定義一些樣式，注意其中的box-shadow就是定義邊框陰影的，如下圖所示
最后我們運(yùn)行界面程序，你會(huì)看到邊框已經(jīng)被添加上陰影了，如下圖所示
1、首先新建一個(gè)html文件，命名為test.html，使用div標(biāo)簽創(chuàng)建一個(gè)模塊，用于測(cè)試。如下圖所示。
2、在test.html文件內(nèi)，給div添加一個(gè)class屬性，屬性值設(shè)置為myway。
3、然后在css標(biāo)簽內(nèi)，通過(guò)class設(shè)置div的樣式，定義它的寬度為200px，高度為200px，背景顏色為黑色。
4、接著在css標(biāo)簽內(nèi)，再使用box-shadow屬性設(shè)置div的陰影效果，其中，左邊陰影為綠色，頂部陰影為藍(lán)色，底部陰影為紅色，右邊陰影為黃色。
5、最后在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果，如下圖所示就完成了。
CSS 實(shí)現(xiàn)讓div的四個(gè)邊框都有陰影的效果：
首先：
HTML代碼
h1CSS 如何實(shí)現(xiàn)讓div的四個(gè)邊框都有陰影的效果？/h1
div class="g1"
div class="g2"/div
/div
CSS代碼
body{background:#f00;}
html{background:#f00;}/*html加背景色*/
.g1{
width:500px;
height:500px;
border:2px solid #fff;
margin:30px auto;
background-color:#fff;
box-sizing:border-box;
}
.g2{
width:400px;
height:400px;
margin:50px auto;
border:2px solid #000;
box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;
}
具體效果：
瀏覽器兼容性差，濾鏡一般很少去用的，不過(guò)半透明等除外，那些可以通過(guò)兼容的css來(lái)控制
text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。隨著html5和CSS3的普及，這一特殊效果使用越來(lái)越普遍。
基本語(yǔ)法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
對(duì)象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}
box-shadow屬性的參數(shù)設(shè)置取值：
陰影類型：此參數(shù)可選。如不設(shè)值，默認(rèn)投影方式是外陰影；如取其唯一值“inset”，其投影為內(nèi)陰影；
X-offset:陰影水平偏移量，其值可以是正負(fù)值。如果值為正值，則陰影在對(duì)象的右邊，其值為負(fù)值時(shí)，陰影在對(duì)象的左邊；
Y-offset:陰影垂直偏移量，其值也可以是正負(fù)值。如果為正值，陰影在對(duì)象的底部，其值為負(fù)值時(shí)，陰影在對(duì)象的頂部；
陰影模糊半徑：此參數(shù)可選，，但其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值時(shí)，則縮小；
陰影顏色：此參數(shù)可選。如不設(shè)定顏色，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)取色不一致，特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色，在Firefox/Opera下表現(xiàn)為黑色（已驗(yàn)證），建議不要省略此參數(shù)。
為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時(shí)，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。
重慶分公司
重慶分公司
