首页 › CSS › 视觉效果 › 滤镜、混合模式与裁剪

filter 滤镜

.img {
  filter: blur(4px);              /* 高斯模糊 */
  filter: brightness(0.5);        /* 亮度 50% */
  filter: contrast(200%);         /* 对比度 */
  filter: grayscale(100%);        /* 灰度 */
  filter: sepia(80%);             /* 棕褐色 */
  filter: hue-rotate(90deg);      /* 色相旋转 */
  filter: saturate(0.5);          /* 饱和度 */
  filter: invert(100%);           /* 反色 */
  filter: opacity(0.5);           /* 透明度 */
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));

  /* 组合 */
  filter: brightness(1.2) contrast(1.3) grayscale(0.5);
}

drop-shadow vs box-shadow

/* box-shadow 沿盒子边框 */
.box-shadow {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* drop-shadow 沿元素实际轮廓（含透明区域） */
.drop-shadow {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

backdrop-filter

对元素后方的内容应用滤镜：

.glass {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  /* 毛玻璃效果 */
}

mix-blend-mode

控制元素与背景的混合模式：

.overlay {
  mix-blend-mode: multiply;     /* 正片叠底 */
  mix-blend-mode: screen;       /* 滤色 */
  mix-blend-mode: overlay;      /* 叠加 */
  mix-blend-mode: difference;   /* 差值 */
}

clip-path 裁剪

.element {
  clip-path: circle(50%);                    /* 圆形 */
  clip-path: ellipse(30% 40% at center);     /* 椭圆 */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* 三角形 */

  /* 路径 */
  clip-path: path('M0 0 L100 0 L100 100 Z');
}

小结

属性	作用
filter	图像滤镜（模糊/灰度/亮度等）
backdrop-filter	背景模糊（毛玻璃）
mix-blend-mode	混合模式
clip-path	裁剪形状

上一节：2D/3D 变换 下一节：过渡 Transition

贡献者: 布欧-Lewyon