CSS下面的陰影是在網頁設計中常用的一種效果,能夠使頁面更加立體感和美觀。下面介紹如何用CSS添加陰影效果。
/* 基本的陰影樣式 */ box-shadow: 5px 5px 10px #888888; /* 分解解釋 */ box-shadow: 水平偏移量 垂直偏移量 模糊距離 陰影大小 陰影顏色; /* 參數說明 */ 水平偏移量:陰影距離標簽左側的水平距離,如果為正則向右偏移,如果為負則向左偏移; 垂直偏移量:陰影距離標簽頂部的垂直距離,如果為正則向下偏移,如果為負則向上偏移; 模糊距離:陰影邊緣的模糊程度,值越大越模糊,值越小越清晰; 陰影大?。宏幱暗臄U張大小,如果不填寫此參數,則陰影與標簽大小相同; 陰影顏色:陰影的顏色值,可以使用十六進制、rgb、rgba等表達方式,根據需求設置陰影的顏色。 /* 如何實現不同類型的陰影 */ 1、內陰影效果 box-shadow: inset 5px 5px 10px #888888; 2、多層陰影 box-shadow: 5px 5px 10px #888888, -5px -5px 10px #888888; 3、邊框陰影 box-shadow: 5px 5px 10px #888888 inset, 0px 0px 10px #888888 inset; 4、文字陰影 text-shadow: 2px 2px 3px #888888;
上述代碼就是關于使用CSS添加陰影效果的介紹。通過調整參數,我們可以實現不同類型的陰影效果。
上一篇css下間距
下一篇mysql查數據顯示字段