CSS中的投影(box-shadow)屬性可以為元素創建具有立體感的效果,它不僅可以應用于文本、圖片等元素,還可以用于邊框、背景等。
/* 基本語法 */ box-shadow: h-shadow v-shadow blur spread color inset; /* 參數說明 */ h-shadow: 設置水平偏移量,正數向右偏移,負數向左偏移; v-shadow: 設置垂直偏移量,正數向下偏移,負數向上偏移; blur: 設置模糊程度,數值越大越模糊,0為無模糊; spread: 設置投影擴散程度,正數擴大,負數縮小; color: 設置投影顏色,可以使用顏色名稱、16進制、RGB等; inset:設置投影方式,默認為外部,設置為inset時為內部; /* 示例 */ .shadow{ box-shadow: 5px 5px 5px #999; }
上面代碼中表示創建一個5px水平偏移、5px垂直偏移、5px模糊、顏色為#999的投影效果。
當然,我們還可以為同一個元素設置多個投影效果:
/* 多重投影 */ .shadow{ box-shadow: 5px 5px 5px #999, -5px -5px 10px #ccc inset; }
上面代碼中表示創建一個5px水平偏移、5px垂直偏移、5px模糊、顏色為#999的外部投影效果,同時還有-5px水平偏移、-5px垂直偏移、10px模糊、顏色為#ccc的內部投影效果。
除了上面的參數外,box-shadow還支持多種特殊效果,例如:outline、inset、none等,可以根據實際需求進行選擇使用。
上一篇css 折扣
下一篇css 括號里的括號