使用CSS可以實現很多圖片效果,如圓角、陰影、邊框等。下面我們來看一些常用的圖片效果實現方法。
/* 圓角 */ img { border-radius: 50%; } /* 陰影 */ img { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } /* 邊框 */ img { border: 1px solid #ccc; } /* 濾鏡 */ img { filter: grayscale(100%); }
上述代碼中,border-radius
屬性可以實現圖片圓角效果,值為50%時可實現圓形圖片。而box-shadow
屬性可以實現圖片陰影效果,通過設置屬性值中的x
和y
值控制陰影位置,blur
值控制模糊度,spread
值控制陰影范圍。
圖片邊框可以通過border
屬性實現,可以設置邊框寬度、顏色、樣式等。而濾鏡可以通過filter
屬性實現,具體效果可以通過設置不同的濾鏡函數來實現,如grayscale()
、blur()
等。
上一篇$$json