filtercss，filtercss属性设置颜色

CSS滤镜魔手册 | 🌈 视觉の超现实指南

🔮 Ⅰ. 基础滤镜库 —— 指尖上的「像素炼丹炉」

CSS filter 是原生视觉变形器，无需PS即可实现：

• 🌫️ 模糊结界：blur(5px) 让元素遁入迷雾，适合玻璃 13
• ☀️ 光之操控：brightness(0%) 一键点亮暗沉图片，拯废片 28
• ⚫ 灰度仪式：grayscale(100%) 全网黑白悼念模式的心代码 28
• 🎭 反转：invert(1) 瞬间切换「片」，赛博感拉满

🛠 Ⅱ. 高阶融合技 —— 组合滤镜の「量子纠缠」

**「滤镜叠加」**才是灵魂玩！

css
.element {  
  filter: hue-rotate(90deg)   
         drop-shadow(10px 10px 5px 000)   
         saturate(0%);  
}  

• 🎨 相轮回：hue-rotate() 实现霓虹渐变 3
• 👥 影分身术：drop-shadow 比 box-shadow 更精准切割透明区域 3
• ⚠️ 告：滤镜顺序不同，效果天差地别！

🎯 Ⅲ. 实战脑洞场 —— 代码即艺术的「降维」

• 🌐 全站黑白模式：仅需1行代码！

  css
  html { filter: grayscale(1); }  

• 🖼️ 动态老照片：

  css
  .vintage {  
    filter: sea(80%) contrast(0%) blur(1px);  
  }  

• 🔮 悬浮幻影：结合 transition 实现 hover 粒子化效果 68

⚙️ Ⅳ. 黑暗技术区 —— 禁忌の「滤镜奥义」

• 💔 IE赎计划：
  • 低版本IE用 filter: gray; + grayscale.js 兼容 2

• 🕶️ 背景滤镜：backdrop-filter 实现磨砂玻璃界面（Chrome限定） 5
• 🤖 SVG 联动机甲：通过 url(filter-id) 调用自定义SVG滤镜 9

🌐 「网页评论员模式」启动

「filter.css 如同 CSS 界的瑞士🗡️ —— 看似小巧，却能切开平庸设计的枷锁。从悲情灰到赛博霓虹，它用代码重新定义了『视觉语』。可惜部分属性仍是浏览器的牺牲品（说的就是你，IE！），但瑕不掩瑜，这仍是前端最浪漫的视觉。」

—— 引自《网页美学觉醒录》65

（本文引述技术要点来自 CSDN 技术博客、arxiv 论文及开源实践 ）

百科知识