1. 程式人生 > 其它 >css樣式 box-shadow屬性

css樣式 box-shadow屬性

描述:就是把一個或多個陰影新增在邊框上

語法:box-shaadow:h-shadow v-shadow blur spread color inset 

前面兩個是必須的,後面幾個可選

下面我根據控制變數講解box-shadow裡面屬性是什麼意思,怎麼展示應用的

h-shadow (水平陰影位置) 預設是黑色,這個屬性意思是往右邊移動畫素距離 

有負值的,負值代表往左側移動

 

 v-shadow(垂直陰影位置)這個屬性表示往上或者往下移動畫素距離

有負值的,負值代表往上移動畫素

 

 blur 模糊距離   表示邊界發散的模糊距離    沒有負值

 

 spread  陰影大小  表示原圖形四周同時往外或者裡擴大或縮小的畫素值。

負值表示往內收縮的畫素

 

 color表示陰影顏色

 

 inset  表示內測陰影  表示陰影從盒子內測出現,

裡面的水平陰影正值表示陰影從左邊開始顯示

裡面的水平陰影負值表示陰影從右邊開始顯示

裡面的垂直陰影正值表示陰影從上部邊開始顯示

裡面的垂直陰影負值表示陰影從下邊開始顯示

 

  同一個盒子做多個陰影用逗號分開

我會在案例中展示這個功能。

 

本期案例分享: