CSS3邊框屬性陰影是CSS3中常用的一個屬性,可以用來為元素添加陰影效果。
/* 基本語法 */ box-shadow: h-shadow v-shadow blur spread color inset; /* 解釋 */ h-shadow: 必需。水平陰影的位置。允許負值。 v-shadow: 必需。垂直陰影的位置。允許負值。 blur: 可選。模糊距離。 spread: 可選。陰影的尺寸。 color: 可選。陰影的顏色。請參閱 CSS 顏色值。 inset: 可選。將外部陰影 (outset) 改為內部陰影。
其中,h-shadow和v-shadow是必需的參數,控制陰影位置,可以是正值或負值。blur參數用于控制陰影的模糊值,數值越大,越模糊。spread參數用于控制陰影的尺寸,數值越大,陰影尺寸越大。
/* 示例1:普通陰影,不帶模糊和尺寸 */ box-shadow: 3px 3px #888; /* 示例2:陰影帶模糊和尺寸 */ box-shadow: 3px 3px 10px 2px #888; /* 示例3:內部陰影 */ box-shadow: inset 3px 3px 10px #888; /* 示例4:多個陰影 */ box-shadow: 3px 3px 10px #888, -3px -3px 10px #888;
可以看到,通過CSS3邊框屬性陰影,我們可以輕松為元素添加不同的陰影效果,在視覺上增強了頁面的層次感和立體感。
上一篇css3設置英文字母格式
下一篇css3視覺差滾動