box-shadow屬性用于添加一個或多個陰影效果到一個元素。
box-shadow屬性有以下語法:
box-shadow: h-shadow v-shadow blur spread color inset;
具體參數解釋如下:
h-shadow:水平陰影的位置,可以是正值也可以是負值。正值表示陰影位于元素右側,負值表示陰影位于元素左側。
v-shadow:垂直陰影的位置,可以是正值也可以是負值。正值表示陰影位于元素下方,負值表示陰影位于元素上方。
blur:可選參數,表示模糊程度。值越大,陰影越模糊。默認為0。
spread:可選參數,表示陰影的尺寸。正值表示陰影擴展,負值表示陰影收縮。默認為0。
color:可選參數,表示陰影的顏色。可以使用顏色名稱、十六進制、RGB或RGBA值表示。默認為黑色。
inset:可選參數,表示陰影是否為內陰影。如果設置為inset,則陰影將顯示在元素內部。
下面是一些例子:
/* 添加一個水平位于元素右側、垂直位于元素下方的黑色陰影 */
box-shadow: 5px 5px black;
/* 添加一個水平位于元素左側、垂直位于元素上方的紅色陰影,模糊程度為10px */
box-shadow: -5px -5px 10px red;
/* 添加一個水平位于元素右側、垂直位于元素下方的黑色陰影,模糊程度為5px,尺寸擴展為10px */
box-shadow: 5px 5px 5px 10px black;
/* 添加一個水平位于元素右側、垂直位于元素下方的黑色內陰影 */
box-shadow: 5px 5px black inset;
你可以根據需要組合不同的參數來設置box-shadow屬性,創建出各種不同的陰影效果。