CSS正方形投影是一種很炫酷的效果,可以在網頁設計中增加立體感。在CSS中,我們可以使用box-shadow屬性來制作正方形投影效果。
.square { width: 200px; height: 200px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.3); }
上述的代碼可以創建一個200px寬、200px高的白色正方形,并且設置了一個由黑色投影顏色組成的10像素模糊的投影效果。box-shadow屬性的第一個參數是水平偏移量,第二個參數是垂直偏移量,第三個參數是模糊半徑,最后一個參數是投影顏色和不透明度。
如果想要在正方形的四個角營造出更加立體的效果,我們可以使用inset關鍵詞來創建一個內陰影。具體代碼如下:
.square { ... box-shadow: 0 0 10px rgba(0,0,0,.3), inset 0 0 10px rgba(0,0,0,.3); }
上述代碼中,我們在外部投影的基礎上增加了一個大小、顏色、不透明度相同的內部投影。這樣就可以在正方形內外邊緣形成一個投影效果,進一步提升了立體感。
如果想要更加個性化的投影效果,我們還可以實現多層投影,通過改變偏移量、模糊半徑、顏色、不透明度等參數,達到更加細膩的效果。總之,利用box-shadow屬性,我們可以輕松地制作出各種形狀的投影效果,為頁面增添不少設計感。