值
描述h-shadow
必需。水平陰影的位置。允許負值。
v-shadow
必需。垂直陰影的位置。允許負值。
blur
可選。模糊距離。
spread
可選。陰影的尺寸。
color
可選。陰影的顏色。請參閱 css 顏色值。
inset
可選。將外部陰影 (outset) 改為內部陰影。
前兩個值和inset很好理解,就是x,y軸的平移距離 和是否是內陰影,
我們先跳過第三個值 先看看第四個值spread
以上 我們可以看出 spread 值 可以當作 將原來的box width 左右和height 上下 都加上了乙個spread;放在box的底下
box的實際位置 取決於前兩個值;
現在我們來看看第三個值 blur
從上圖 我們可以看出blur 值 又在原來陰影的基礎上 上下左右各加上了blur的值
同時陰影也模糊了少許,隨之blur的值不斷增大,陰影也就越來越模糊,
我這裡的理解就是: 舉個列子
假如我們用紅色的顏料刷牆,但是刷了spread面積的時候用完了,剩下的blur部分,我們趁著spread油漆沒乾
用沒幹的油漆刷blur的部分,這樣就造成spread會越來越模糊。
我是這麼理解的 歡迎大佬批評指教
具體blur spread 之間的變化函式,我也不知道
box shadow 屬性詳解
1.box shadow屬性語法 box shadow 屬性接受值最多由五個不同的部分組成。box shadow offset x offset y blur spread color position 換句說 物件選擇器 不像其它的屬性,比如 border,它們的接受值可以被拆分為一系列子屬性,b...
box shadow 詳解及示例
box shadow b ks do 英文示意 box 盒,包廂 shadow 陰影,漸變 定義 box shadow none inset?color 注 示例 1 配合border radius實現圓形陰影 box shadow 20px 10px 5px 0px grey border rad...
CSS3屬性 box shadow測試
容器設定陰影 box shadow 語法 box shadow h shadow v shadow blur spread color inset 以上各屬性值的解析 horizontal 水平 指定水平偏移陰影。正值 即 5px 陰影向右,而為負值 即 10px 將使它偏向左。vertical 垂...