立體墻CSS是一種非常流行的CSS設計技術,可以讓你的網站看起來更加立體感強,讓用戶有更好的視覺體驗。通過利用CSS的各種屬性設置,我們可以創建出非常酷炫的立體墻效果。
.wall { background-color: #a2a2a2; height: 400px; width: 400px; position: relative; } .wall::before { content: ""; position: absolute; width: 100%; height: 100%; top: 10px; left: -10px; background: rgba(0,0,0,0.6); box-shadow: 15px -2px 5px rgba(0,0,0,0.5), 15px 9px 5px rgba(0,0,0,0.5), -0.5px 11px 0px rgba(0,0,0,0.5), -0.5px 23px 0px rgba(0,0,0,0.5), 14px 22px 0px rgba(0,0,0,0.5), 22px 11px 0px rgba(0,0,0,0.5); } .wall::after { content: ""; position: absolute; width: 100%; height: 100%; bottom: 10px; right: -10px; background: rgba(255,255,255,0.6); box-shadow: -15px 2px 5px rgba(255,255,255,0.5), -15px -9px 5px rgba(255,255,255,0.5), 0.5px -11px 0px rgba(255,255,255,0.5), 0.5px -23px 0px rgba(255,255,255,0.5), -14px -22px 0px rgba(255,255,255,0.5), -22px -11px 0px rgba(255,255,255,0.5); }
在這個代碼中,我們使用了偽元素:before和:after來分別創建出墻體的陰影效果。我們設置了多個盒陰影,使用不同的顏色和方向來模擬出立體感。我們還通過設置墻體的背景色和寬高屬性,使其看起來更真實。
你可以將這個代碼應用到你的網站中,讓用戶感受到更加立體的視覺效果。
上一篇移動端底部導航欄 css
下一篇移動端開發常用css