一、定義和用法

box-shadow屬性 向框添加一個或多個陰影。

二、語法

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平陰影的位置。允許負值。	?
v-shadow	必需。垂直陰影的位置。允許負值。	?
blur	可選。模糊距離。	?
spread	可選。陰影的尺寸。	?
color	可選。陰影的顏色。	?
inset	可選。將外部陰影 (outset) 改為內(nèi)部陰影。

三、例子

1. box-shadow:2px?3px?4px?#CCC;

/*<div style="box-shadow:2px 3px 4px #CCC;width:300px;height:25px;margin:50px;border:2px solid #9CF;">博客園</div>*/?

一個帶外陰影的元素，陰影位置x軸向右偏移2px，y軸向下偏移3px，模糊范圍4px，陰影顏色#CCC

?

2. box-shadow:inset?0?-4px?#CCC;

帶內(nèi)陰影的元素，陰影x軸不偏移，y向上偏移4px，顏色#CCC

?

3.區(qū)別

1）內(nèi)部陰影與外部陰影

水平 數(shù)值正：向右偏移。外部陰影向右偏移，陰影在右；內(nèi)部陰影向右偏移，陰影在左。

? ?數(shù)值負：向左偏移。外部陰影向左偏移，陰影在左；內(nèi)部陰影向左偏移，陰影在右。

垂直 數(shù)值正：向下偏移。外部陰影向下偏移，陰影在下；內(nèi)部陰影向下偏移，陰影在上。

? ?數(shù)值負：向上偏移。外部陰影向上偏移，陰影在上；內(nèi)部陰影向上偏移，陰影在下。

?

2）陰影位置大小

?

3）模糊距離

“0”指沒有模糊效果就是最清楚，值越大越模糊，達到一定值的時候就是一團霧

?

4）陰影尺寸

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/teg-21/p/5210975.html

總結(jié)

以上是生活随笔為你收集整理的box-shadow属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。