CSS中的陰影樣式可以為圖片添加更多的細節和層次感,使其更加立體。以下是一些常見的CSS陰影樣式。
/* 基礎陰影樣式 */ .box { box-shadow: 2px 2px 10px rgba(0,0,0,0.5); } /* 展開式陰影 */ .box2 { box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* inset表示是內陰影,0 0表示內陰影的偏移量為0,10px表示內陰影的模糊程度,后面的rgba表示陰影的顏色和透明度*/ } /* 多層次陰影 */ .box3 { box-shadow: 0 0 5px rgba(0,0,0,0.2),0 0 10px rgba(0,0,0,0.4),0 0 15px rgba(0,0,0,0.6); /* 這里就是設置多個陰影,其中透明度越大的陰影越靠前,模糊程度越大的陰影越靠后 */ } /* 文字投影樣式 */ .box4 { text-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* 與box-shadow類似,只不過這里是為文字添加陰影效果 */ }
在實際應用中,可以根據不同的需求選擇不同的陰影樣式,并且還可以將不同的樣式進行組合,以達到更好的效果。