CSS 樣式 div 投影是網(wǎng)頁設(shè)計中的一個重要技巧，可以為網(wǎng)頁元素增添層次感和立體感。下面來介紹兩種實現(xiàn) div 投影的方法。

1. 使用 box-shadow

div {
box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

其中，box-shadow 屬性接受四個值：水平偏移量、垂直偏移量、模糊度和顏色。使用這個方法可以輕松地為 div 元素添加投影效果。

2. 使用 ::before 與 ::after 偽元素

div {
position: relative;
}
div::before,
div::after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
background: #777;
transform: rotate(-3deg);
box-shadow: 0 15px 10px rgba(0,0,0,0.7);
}
div::after {
left: auto;
right: 10px;
transform: rotate(3deg);
}

這個方法的實現(xiàn)原理是在 div 元素上使用兩個偽元素，使其以旋轉(zhuǎn)的方式遮蓋住 div 元素的一部分，從而營造出立體感。需要注意的是，這種方法需要使用絕對定位和 transform 屬性，適用于對樣式掌握得更加熟練的用戶。