CSS下邊陰影是一種常見的陰影效果,可以讓頁面看起來更加立體且有深度感。下面介紹一種只顯示下邊陰影的方法。
.shadow{ box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.3); }
首先,我們使用box-shadow屬性來定義陰影效果。這個屬性值包含四個參數,依次是水平偏移、垂直偏移、陰影模糊半徑和陰影擴散半徑。
上述代碼中的box-shadow值為0px 4px 0px 0px rgba(0, 0, 0, 0.3)。其中,水平偏移和陰影模糊半徑均為0px,陰影擴散半徑也為0px。而垂直偏移則為4px,表示陰影向下偏移4個像素。
另外,我們可以在box-shadow屬性前加上瀏覽器前綴,以兼容不同瀏覽器的陰影效果。-webkit-box-shadow用于谷歌瀏覽器和Safari瀏覽器,-moz-box-shadow用于火狐瀏覽器。
綜上,我們可以使用box-shadow屬性和垂直偏移來實現只顯示下邊陰影的效果。
上一篇css另一個元素top
下一篇mysql數據庫被覆蓋了