色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css樣式div投影

呂致盈2年前10瀏覽0評論

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 屬性,適用于對樣式掌握得更加熟練的用戶。