CSS 滤镜

阐述

滤镜 filter 可以整体地调节 CSS 元素的颜色，包括：

光学效果

• 亮度 brightness(<percentage>)
• 对比度 contrast(<percentage>)
• 棕褐色 sepia(<percentage>)
• 灰度 grayscale(<percentage>)
• 色相旋转 hue-rotate(<angle>)

模糊

模糊 blur(<length>)

阴影

阴影 drop-shadow(<l> <l> <l> <color>)

实例

<style>
  body {
    overflow: hidden;
  }
  .wrapper {
    position: relative;
  }
  .gradient {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: linear-gradient(
      deeppink,
      red,
      coral,
      gold,
      white
    );
  }
  .blurry {
    position: absolute;
    filter: blur(40px);
    transform: scale(1.3) translateX(10%) rotate(30deg);
  }
  .regular {
    filter: drop-shadow(0px 0px 25px hsl(0deg 0% 0% / 0.3));
  }
</style>

<div class="wrapper">
  <div class="gradient blurry"></div>
  <div class="gradient regular"></div>
</div>

性质

相关内容

参见 CSS 盒阴影#类比、比较与对比

参考文献