CSS3技術是前端開發必備的技能之一,其中的filter shadow也是十分實用的特效之一。Filter shadow將陰影效果和過濾器結合起來,能夠快速而簡單的創建出多種陰影并且讓陰影更加高級美觀。
/* 陰影 */
.box {
box-shadow: 3px 3px 12px #ddd;
filter: drop-shadow(3px 3px 12px #ddd);
}
/* 模糊 */
.box {
filter: blur(5px);
}
/* 毛玻璃 */
.box {
-webkit-filter: blur(20px);
filter: blur(20px);
}
/* 灰度 */
.box {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* 飽和度 */
.box {
-webkit-filter: saturate(200%);
filter: saturate(200%);
}
/* 反相 */
.box {
-webkit-filter: invert(100%);
filter: invert(100%);
}
通過這些CSS3的filter shadow屬性,我們可以輕松地實現陰影、模糊、毛玻璃、灰度、飽和度、反相等多種效果,為我們的設計增添無限的可能性。可以說Filter shadow是Web開發者不可或缺的技能之一,希望大家能夠多多掌握并且靈活運用。