探索盒子陰影box-shadow

盒子陰影之探索

盒子陰影：box-shadow

作用；在盒子不同的方位添加你想要的陰影效果。

box-shadow有六個(gè)參數(shù)值，下面一一舉例說(shuō)明

語(yǔ)法:

Box-shadow: offset-x | offset-y | blur | sperd | color| position |

 注意?。?！以上也是box-shadow默認(rèn)的排序!

第一：offset-x

陰影的水平偏移量，即X軸上陰影的位置，正值出現(xiàn)在元素的右側(cè)負(fù)值在左側(cè)。

當(dāng)為正值代碼：

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 20px 0px 10px 10px red;

}

運(yùn)行結(jié)果：

當(dāng)為負(fù)值代碼：

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: -20px 0px 10px 10px red;

}

運(yùn)行結(jié)果：

第二：offset-y

陰影垂直偏移量，即y軸上的陰影位置，正值是使陰影出現(xiàn)在元素的下方，負(fù)值出現(xiàn)在元素上方。

當(dāng)為正值代碼

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 0px 20px 10px 10px red;

margin: 0px auto;

}

當(dāng)為負(fù)值代碼

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 0px -20px 10px 10px red;

margin: 0px auto;

}

第三：blur

陰影的模糊半徑，值越大越顯得越模糊不清，一下為對(duì)比

當(dāng)值為0時(shí)

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 20px red;

}

當(dāng)值為10時(shí)的模糊程度

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 10px 20px red;

}

當(dāng)值為30時(shí)的模糊程度

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 10px 20px red;

}

第四：陰影的尺寸

數(shù)值越大距離邊框的距離越遠(yuǎn)

當(dāng)值為10px時(shí)

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 10px red;

}

當(dāng)值為50px時(shí)

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 50px red;

}

第五：陰影的顏色

把紅色換成藍(lán)色

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 50px blue;

}

第六：position

默認(rèn)值為外部陰影，一般情況下這個(gè)值不會(huì)給出，如果需要內(nèi)部陰影在后面加上inset即可！

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 10px blue inset;

}

默認(rèn)值時(shí)

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 10px blue;

}

當(dāng)然陰影的形狀是跟隨盒子的變化而變化的，當(dāng)為圓形盒子時(shí)

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

border-radius:50% ;

box-shadow: 20px 20px 10px 10px blue;

}

多重陰影

box-shadow 屬性能在單個(gè)元素上接受多個(gè)陰影。每個(gè)陰影通過(guò)用逗號(hào)分隔的 box-shadow 屬性列表來(lái)加載。

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset,20px 20px 10px 0px rgba(0,0,0,0.5); 

}