box shadow 屬性詳解

2022-07-17 01:45:13 字數 812 閱讀 7999

描述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 垂...