css陰影詳解之Box-shadow修飾性屬性詳解
我要評(píng)論Box-shadow屬性是css效果非常實(shí)用的修飾效果，可以在很多地方見到它的影子。
知乎中的Box-shadow
百度中的Box-shadow
所以，來(lái)詳細(xì)看一下Box-shadow的參數(shù)：
box-shadow:（inset）2px 2px 5px #000;
其中有六個(gè)參數(shù)，分別為
inset:內(nèi)陰影/外陰影，
2px 2px （陰影偏移位置），
5px（陰影模糊程度），
5px（陰影長(zhǎng)度擴(kuò)展），
#000（顏色）
接下來(lái)看一些常用的實(shí)例：
<div style=" box-shadow:2px 2px 5px #000; border-radius:10px; "> </div>
陰影位置向right和bottom偏移了2px，使其獲得立體感。
<div style=" box-shadow:0px 0px 10px #000; border-radius:10px; "> </div>
陰影位置不進(jìn)行偏移，模糊范圍10px。
還可以在模糊范圍后加上一個(gè)像素值，用來(lái)表示陰影擴(kuò)展長(zhǎng)度的 值：
<div style=" box-shadow:0px 0px 10px 10px #000; border-radius:10px; "> </div>
擴(kuò)展長(zhǎng)度值為正；
<div style=" box-shadow:0px 0px 10px -10px #000; border-radius:10px; "> </div>
擴(kuò)展長(zhǎng)度值為負(fù)，可以用來(lái)模擬展示效果。
我們還可以用多組陰影屬性來(lái)模擬動(dòng)漫效果：
<div style="
box-shadow:0px 0px 0px 3px #000,
0px 0px 0px 6px #2e56bf,
0px 0px 0px 9px #ea982e;
border-radius:10px;
">
</div>三重陰影，制造動(dòng)漫描邊效果。
使用偽元素創(chuàng)造陰影效果,可以實(shí)現(xiàn)非常逼真的真實(shí)感:
<div class="box shadow"></div>
<style>
.box { margin:10px auto;
width: 180px;
height: 90px;
background: #ccc;
border-radius: 10px;
}
.shadow {
position: relative;
max-width: 270px;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
}
.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-4deg);
}
.shadow::after{
right:10px;
left:auto;
transform:rotate(3deg);
}
</style>到此這篇關(guān)于css陰影詳解之Box-shadow修飾性屬性詳解的文章就介紹到這了,更多相關(guān)css Box-shadow修飾性屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS3里box-shadow屬性的使用方法示例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧需要的朋友可以參2020-07-03
CSS陰影效果的比較之drop-Shadow與box-Shadow
這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-05-23
css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影
這篇文章主要介紹了css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-05Photoshop投影與CSS中box-shadow的轉(zhuǎn)換
box-shadow是給元素塊添加周邊陰影效果，本文給大家介紹Photoshop投影與CSS中box-shadow的轉(zhuǎn)換，對(duì)css中box shadow相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-27CSS偽元素 :before, :after, box-shadow應(yīng)用
利用CSS偽元素 ：before 和 ：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-04ie-css3.htc 讓IE6, 7, and 8也支持box-shadow
IE6/7并不支持CSS3的屬性，IE8也不能很好的支持CSS3。如何讓IE 6/7/8支持border-radius (rounded)，box-shadow ( shadow)，text-shadow等這些屬性呢？這里介紹一個(gè)通過(guò)htc2012-10-12- 你在使用box-shadow來(lái)實(shí)現(xiàn)陰影效果的時(shí)候，有沒有注意到有些情況下，陰影并不是透明的效果2011-08-28
CSS text-shadow，box-shadow，border-radius屬性
篇文章將對(duì) CSS 的幾個(gè)新屬性 (text-shadow，box-shadow，and border-radius) 做基本介紹。這些 CSS3 屬性通常用來(lái)加強(qiáng)頁(yè)面布局。2010-03-09
