小程序中的CSS濾鏡屬性可以幫助我們實現一些有趣的效果,比如圖片的色彩調整、模糊、陰影等。本文將介紹一些常用的濾鏡屬性。
/* 色彩調整 */ .filter-color { filter: grayscale(100%); /* 灰度 */ } .filter-color2 { filter: sepia(100%); /* 棕褐色 */ } .filter-color3 { filter: hue-rotate(90deg); /* 色相旋轉 */ } .filter-color4 { filter: invert(100%); /* 反轉 */ } .filter-color5 { filter: saturate(5); /* 飽和度 */ } .filter-color6 { filter: brightness(2); /* 亮度 */ } .filter-color7 { filter: contrast(2); /* 對比度 */ } /* 模糊 */ .filter-blur { filter: blur(10px); /* 高斯模糊 */ } /* 陰影 */ .filter-shadow { filter: drop-shadow(10px 10px 10px #333); /* 陰影效果 */ }
以上是一些常用的小程序CSS濾鏡屬性,可以根據實際需求進行組合使用。需要注意的是,部分濾鏡屬性在不同瀏覽器和移動端上可能存在兼容性問題,建議在具體使用時進行兼容性測試。
上一篇小程序css布局常用代碼
下一篇小程序+css+元素選擇