明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

box-shadow的使用技巧

發(fā)表時(shí)間：2024-05-09 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]一、box-shadow的參數(shù)解析box-shadow:none;box-shadow: h-shadow v-shadow blur spread color inset;box-shadow參數(shù)解析值描述none默認(rèn)值，元素沒有任何陰影效果。h-shadow陰影水平偏移量，其值可以是正負(fù)值。如...

一、box-shadow的參數(shù)解析


box-shadow:none;


box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow參數(shù)解析
值描述
none默認(rèn)值，元素沒有任何陰影效果。
h-shadow陰影水平偏移量，其值可以是正負(fù)值。如果取正值，則陰影在元素的右邊，反之取負(fù)值，陰影在元素的左邊。
v-shadow陰影垂直偏移量，其值可以是正負(fù)值。如果取正值，則陰影在元素的底部，反之取負(fù)值，陰影在元素的頂部。
blur陰影模糊半徑，可選參數(shù)。其值只能是正值，如果取值為“0”時(shí)，表示陰影不具有模糊效果，如果取值越大，陰影的邊緣就越模糊。
spread陰影擴(kuò)展半徑，可選參數(shù)。其值可以是正負(fù)值，如果取值為正值，則整個(gè)陰影都延展擴(kuò)大，反之取值為負(fù)值，則整個(gè)陰影都縮小。
color陰影顏色，可選參數(shù)，如果不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在Webkit內(nèi)核下的瀏覽器將無(wú)色，也就是透明，建議不要省略這個(gè)參數(shù)。
inset陰影類型，可選值。如果不設(shè)置，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”，就是給元素設(shè)置內(nèi)陰影。

二、box-shadow應(yīng)用

box-shadow的使用技巧

我們接下來要做的效果，是這樣的

box-shadow的使用技巧

注意這個(gè)區(qū)域，白色的盒子模型上面遺留著上面橙色盒子的邊框陰影，這個(gè)效果怎么做呢？


<p class="contain">
    <p class="contain-wrapper">        
    </p>
    <p class="foot-wrapper">        
    </p></p>

我們的html代碼就這些，很明顯綠色區(qū)域是contain，橙色是contain-wrapper，白色是foot-wrapper。
我們來寫他們的css代碼


*{
    margin:0;
    padding: 0;
}.contain{
    overflow: hidden;
    margin: 0 auto;
    width: 250px;
    height: 300px;
    background-color: #09b800;
}.contain-wrapper{
    margin: 0 auto;
    margin-top: 10px;
    width: 200px;
    height: 100px;
    background: #ff7e00;
    border-radius: 10px;
    box-shadow: 0px 9px 15px -1px rgba(0,0,0,0.3);
}.foot-wrapper{
    margin: 0 auto;
    width: 180px;
    height: 100px;
    background: white;
}

我們給橙色盒子設(shè)置了邊框陰影，橙色盒子的下邊框和白色盒子的上邊框緊密地貼在一起，這時(shí)候，問題出現(xiàn)了，我們來看看效果

box-shadow的使用技巧

我們發(fā)現(xiàn)橙色盒子的下邊框的陰影被白色盒子給遮住了，這可如何是好？我是用一個(gè)特別猥瑣的方法解決的。

既然陰影被遮住了，那么我們就讓白色盒子補(bǔ)償給橙色盒子一條陰影，不是有一個(gè)參數(shù)叫做inset嗎？我們把白色盒子的上邊框的陰影往里面投影，補(bǔ)上這個(gè)空缺不就好了嗎？


*{
    margin:0;
    padding: 0;
}.contain{
    overflow: hidden;
    margin: 0 auto;
    width: 250px;
    height: 300px;
    background-color: #09b800;
}.contain-wrapper{
    margin: 0 auto;
    margin-top: 10px;
    width: 200px;
    height: 100px;
    background: #ff7e00;
    border-radius: 10px;
    box-shadow: 0px 9px 15px -1px rgba(0,0,0,0.3);
}.foot-wrapper{
    margin: 0 auto;
    width: 180px;
    height: 100px;
    background: white;
        box-shadow: inset 0 9px 5px -1px rgba(0,0,0,0.1);//新增，其他所有的參數(shù)要跟橙色盒子的陰影一樣，只是方向改變，這樣才不會(huì)影響結(jié)合起來的效果。}

以上就是box-shadow的使用技巧 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。