CSS是前端開發中不可或缺的一部分,它可以讓網頁更加美觀動人。其中,實現圓角圖片陰影也是一個比較常見的需求。
/* 實現圓角圖片 */ img{ border-radius: 50%; } /* 實現圖片陰影 */ img{ box-shadow: 0 0 6px rgba(0,0,0,0.3); }
以上代碼就是實現圓角圖片和陰影的CSS代碼。其中,通過border-radius屬性可以實現圖片的圓角效果,而box-shadow屬性可以實現圖片的陰影效果。
/* 同時實現圓角圖片和陰影 */ img{ display: inline-block; border-radius: 50%; box-shadow: 0 0 6px rgba(0,0,0,0.3); overflow: hidden; }
如果希望同時實現圓角圖片和陰影效果,可以將以上兩種代碼結合使用,并使用overflow:hidden屬性隱藏圖片的邊角。在這個例子中,還需要使用display:inline-block屬性來將圖片設置為inline-block元素,以免出現奇怪的換行問題。
總的來說,實現圓角圖片陰影并不難,只需要幾行簡單的CSS代碼就可以實現。這對于美化網頁來說具有很大的幫助作用。