在CSS中,可以使用box-shadow
屬性來添加陰影效果。box-shadow
屬性接受四個(gè)值,分別是水平偏移、垂直偏移、模糊半徑和擴(kuò)展半徑,這四個(gè)值共同決定了陰影的大小、形狀和位置。
以下代碼將一個(gè)元素添加了一個(gè)向右偏移20像素、向下偏移10像素、模糊半徑為5像素的陰影:
element { box-shadow: 20px 10px 5px; }
如果想要讓陰影在元素內(nèi)部顯示,可以通過設(shè)置position
屬性為relative
或absolute
來實(shí)現(xiàn),這樣,陰影就會相對于元素的位置進(jìn)行顯示,而不是在元素的外部。
以下代碼將一個(gè)元素添加了一個(gè)向右偏移20像素、向下偏移10像素、模糊半徑為5像素的陰影,并將元素的position
屬性設(shè)置為relative
:
element { position: relative; box-shadow: 20px 10px 5px; }
這樣,陰影就會顯示在元素的內(nèi)部,而不是在元素的外部,注意,如果元素的寬度或高度小于陰影的大小,那么陰影可能會被裁剪掉,在設(shè)置陰影時(shí),需要考慮到元素的實(shí)際大小。