實(shí)現(xiàn)左側(cè)投影的效果是一個(gè)比較常見的需求,可以使用 CSS 的box-shadow 屬性來(lái)實(shí)現(xiàn)。
這里給大家提供一段代碼,可以實(shí)現(xiàn)一個(gè)左側(cè)投影行的效果:
.shadowed { box-shadow: -10px 0px 10px -10px rgba(0, 0, 0, 0.6); }
這里解釋一下代碼:
box-shadow 屬性是實(shí)現(xiàn)投影效果的核心屬性,-10px 0px指的是投影的偏移量,其中-10px 表示投影朝左偏移 10 像素,0px 表示投影不偏移上下位置。
后面的 10px 指的是投影模糊半徑,模糊半徑越大,投影的邊緣就會(huì)越模糊。
最后我們來(lái)看一下 rgba(0, 0, 0, 0.6) 這個(gè)參數(shù),它是投影的顏色和透明度,這里設(shè)置為黑色,透明度為 0.6。
通過(guò)對(duì)這段代碼的修改,還可以實(shí)現(xiàn)其他不同的投影效果,如右側(cè)投影、上下投影等等。
上一篇css嵌入樣式表