背景陰影是指在一個元素的背景下添加一層陰影,用于突出顯示該元素。在 CSS 中實現背景陰影有兩種方式——使用 box-shadow 屬性和使用偽元素 ::before 或 ::after。以下是示例代碼:
/* 使用 box-shadow 實現背景陰影 */ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 使用偽元素 ::before 實現背景陰影 */ content: ''; display: block; position: absolute; top: -5px; left: -5px; bottom: -5px; right: -5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index: -1;
box-shadow 屬性接受四個參數——水平偏移量、垂直偏移量、模糊半徑和顏色。示例代碼中的參數分別是 2px、2px、5px 和 rgba(0, 0, 0, 0.5)。其中,rgba() 是一種顏色表示方式,包含四個參數:紅、綠、藍和透明度。
使用偽元素 ::before 和 ::after 可以在元素的前面或后面添加內容。示例代碼中使用 ::before 添加一個空的塊級元素,然后設置其大小和位置,并將其下拉到元素的后面,并添加 box-shadow。偽元素需要設置 z-index,以確保位于元素的背景下面。
上一篇自制css垂直導航條
下一篇自動刪除無用的css