在CSS中給圖片加上陰影效果是非常常用的技巧,下面就讓我們來一起學習如何實現這種效果。
img { box-shadow: 4px 4px 4px #888888; }
以上代碼就是用來給圖片添加陰影效果的代碼,其中box-shadow屬性是CSS3中用來給元素添加陰影效果的屬性,它的參數分別表示陰影的水平偏移量、垂直偏移量、模糊半徑和顏色。
其中,水平偏移量和垂直偏移量可正可負,分別表示陰影的相對位置,而模糊半徑是指陰影的邊緣的模糊范圍。
img { box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); }
如果想要設置透明度,可以使用rgba顏色值來設置顏色和透明度,其中參數從左到右依次為紅、綠、藍和透明度。
當然,我們也可以只給圖片的某個方向加上陰影效果,比如只在圖片的下方加一個陰影,代碼如下:
img { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4); }
以上代碼中,設置了水平偏移量為0,垂直偏移量為4px,只在下方加上一個陰影。
總之,在CSS中給圖片添加陰影效果非常簡單,只需使用box-shadow屬性即可實現。通過調整偏移量、模糊半徑和顏色等參數,可以得到各種不同的陰影效果,讓你的網頁更加美觀大方。
上一篇css在圖片上加入圖片
下一篇css在當前頁頁跳轉