在CSS中,我們可以使用box-shadow
屬性來(lái)設(shè)置元素上邊的投影。box-shadow
屬性接受四個(gè)值,分別代表水平偏移、垂直偏移、模糊半徑和顏色,如果我們只設(shè)置兩個(gè)值,那么投影將只在水平方向上偏移,即只在元素的左側(cè)或右側(cè)添加投影,如果我們?cè)O(shè)置三個(gè)值,那么投影將在水平和垂直方向上同時(shí)偏移,即可以在元素的左側(cè)、右側(cè)和下方添加投影。
下面是一個(gè)例子,展示如何為一個(gè)div元素設(shè)置三個(gè)邊的投影:
div { width: 200px; height: 200px; background-color: #ffffff; box-shadow: 10px 10px 10px #000000; }
在這個(gè)例子中,box-shadow
屬性的三個(gè)值分別為10px、10px和10px,分別代表水平偏移、垂直偏移和模糊半徑,顏色設(shè)置為#000000,即黑色,這樣,div元素的左側(cè)、右側(cè)和下方都將有黑色的投影。
需要注意的是,如果元素本身有邊框或背景色,那么投影將會(huì)疊加在這些邊框或背景色之上,投影的模糊半徑也可以根據(jù)需要調(diào)整,以改變投影的清晰度和范圍。