CSS 樣式 div 投影是網頁設計中的一個重要技巧,可以為網頁元素增添層次感和立體感。下面來介紹兩種實現 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);
}
這個方法的實現原理是在 div 元素上使用兩個偽元素,使其以旋轉的方式遮蓋住 div 元素的一部分,從而營造出立體感。需要注意的是,這種方法需要使用絕對定位和 transform 屬性,適用于對樣式掌握得更加熟練的用戶。