CSS中的陰影是通過box-shadow屬性來實(shí)現(xiàn)的。該屬性可以給一個(gè)元素添加陰影效果,并且可以自定義陰影的大小、顏色、位置等相關(guān)屬性。
.box{ box-shadow: 5px 5px 10px #888888; }
如上代碼所示,box-shadow屬性后面接著陰影的大小、位置和顏色。其中,第一個(gè)參數(shù)表示陰影距離元素右側(cè)的距離;第二個(gè)參數(shù)表示陰影距離元素底部的距離;第三個(gè)參數(shù)是陰影的模糊半徑,值越大表示陰影越模糊,陰影也會越大;最后一個(gè)參數(shù)則是陰影的顏色值。
此外,還可以通過inset關(guān)鍵字來實(shí)現(xiàn)內(nèi)部陰影效果:
.box{ box-shadow: inset 5px 5px 10px #888888; }
如上代碼所示,inset關(guān)鍵字表示陰影在元素內(nèi)部。其他參數(shù)的含義和前面一樣。