本篇內(nèi)容主要講解“CSS3怎么設(shè)置對(duì)象盒子陰影和圖片陰影”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS3怎么設(shè)置對(duì)象盒子陰影和圖片陰影”吧!
成都創(chuàng)新互聯(lián)專注于歙縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供歙縣營(yíng)銷型網(wǎng)站建設(shè)，歙縣網(wǎng)站制作、歙縣網(wǎng)頁(yè)設(shè)計(jì)、歙縣網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù)，打造歙縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供歙縣網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
一、CSS樣式單詞與使用語(yǔ)法
1、盒子陰影樣式單詞：box-shadow
2、語(yǔ)法
p{box-shadow:001px#000inset;}
代表邊框間距靠左0靠上0和1px陰影范圍陰影顏色為黑色（#000），有inset代表框內(nèi)陰影，不帶inset代表框外陰影。
注意：
box-shadow:0px0px1px#000
第1個(gè)值為0時(shí)，代表左右邊框陰影為1px范圍
第1個(gè)值為正整數(shù)代表左邊框陰影
第1個(gè)值為負(fù)整數(shù)代表右邊框陰影
同理
第2個(gè)值為0代表上下邊框陰影
第2個(gè)值為正整數(shù)代表1px陰影距離上邊框多少
第1個(gè)值為負(fù)整數(shù)代表下邊框陰影設(shè)置
3、瀏覽器兼容圖
微信截圖_20181016140609.png瀏覽器兼容一覽表圖
二、pCSS5案例
pCSS5分別對(duì)p盒子和圖片IMG設(shè)置內(nèi)陰影和外陰影為案例。
1、案例HTML代碼
2、案例CSS代碼
.box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}
.box2img{box-shadow:5px2px6px#000}
分別設(shè)置p對(duì)象內(nèi)陰影效果和圖片外陰影效果
到此，相信大家對(duì)“CSS3怎么設(shè)置對(duì)象盒子陰影和圖片陰影”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
