css樣式 box-shadow屬性
阿新 • • 發佈:2022-04-19
描述:就是把一個或多個陰影新增在邊框上
語法:box-shaadow:h-shadow v-shadow blur spread color inset
前面兩個是必須的,後面幾個可選
下面我根據控制變數講解box-shadow裡面屬性是什麼意思,怎麼展示應用的
h-shadow (水平陰影位置) 預設是黑色,這個屬性意思是往右邊移動畫素距離
有負值的,負值代表往左側移動
v-shadow(垂直陰影位置)這個屬性表示往上或者往下移動畫素距離
有負值的,負值代表往上移動畫素
blur 模糊距離 表示邊界發散的模糊距離 沒有負值
spread 陰影大小 表示原圖形四周同時往外或者裡擴大或縮小的畫素值。
負值表示往內收縮的畫素
color表示陰影顏色
inset 表示內測陰影 表示陰影從盒子內測出現,
裡面的水平陰影正值表示陰影從左邊開始顯示
裡面的水平陰影負值表示陰影從右邊開始顯示
裡面的垂直陰影正值表示陰影從上部邊開始顯示
裡面的垂直陰影負值表示陰影從下邊開始顯示
同一個盒子做多個陰影用逗號分開
我會在案例中展示這個功能。
本期案例分享: