CSS是網頁設計中重要的一環,其強大的樣式控制能力能夠為網頁帶來美觀、實用的效果。其中,為圖片添加陰影是常見的美化手法。
下面我們通過CSS的box-shadow屬性來實現這一效果:
img { box-shadow: 0 0 10px rgba(0,0,0,0.5); }
上述代碼表示為圖片添加一個外陰影效果。box-shadow屬性由四個值組成:
- 水平偏移量:表示陰影在水平方向上的偏移長度,可為負值。
- 垂直偏移量:表示陰影在垂直方向上的偏移長度,可為負值。
- 模糊半徑:表示陰影的模糊程度,值越大陰影越模糊。
- 陰影顏色:表示陰影的顏色,可使用rgba或十六進制顏色值。
除了外陰影,我們還可以為圖片添加內陰影效果:
img { box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
上述代碼中,將box-shadow屬性的第一個值設置為"inset"表示創建內陰影。其余值的含義和用法與外陰影相同。
通過使用box-shadow屬性,我們可以輕松地為圖片添加美觀的陰影效果,提升網頁視覺體驗。