【css】通过filter实现不规则的阴影聊聊 filter 的使用

站长

2023年07月17日 15:36 · 阅读数 18

前言

我们在实际的开发中，很多时候为了实现UI效果，其实我们会生成一些不规则的div，举个常见的例子，比如一个带三角的对话框加一个阴影效果，如果单纯使用css的box-shadow实现起来就很麻烦，这时，我们使用css的filter就能很轻松的实现了

filter 介绍

CSS滤镜（CSS filter）是一组CSS属性，用于对元素进行图像处理和效果的操作。它可以通过修改元素的视觉呈现来创建各种吸引人的视觉效果。以下是一些常见的CSS滤镜效果：

blur()：给元素应用高斯模糊效果，使其看起来模糊不清。
brightness()：调整元素的亮度级别。可以使用值大于1增加亮度，使用值小于1降低亮度。
contrast()：调整元素的对比度。可以使用值大于1增加对比度，使用值小于1降低对比度。
grayscale()：将元素转换为灰度图像。可以使用值介于0到1之间的数来指定转换的程度。
invert()：将元素中的颜色反转。可以使用值介于0到1之间的数来指定反转的程度。
saturate()：增加或减少元素的饱和度。可以使用值大于1增加饱和度，使用值小于1降低饱和度。
sepia()：将元素转换为深褐色的图像。可以使用值介于0到1之间的数来指定转换的程度。
drop-shadow()：在元素后面创建一个阴影效果。可以指定阴影的颜色、水平偏移量、垂直偏移量和模糊半径。

这些只是CSS滤镜的一些常见效果，你可以使用它们的不同组合和值来创建更多的视觉效果。要应用滤镜效果，可以使用CSS的filter属性，并将相应的滤镜函数作为值进行指定。例如：

.my-element {
  filter: blur(5px) brightness(120%) grayscale(0.7);
}

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .dialog-container {
      position: relative;
      width: 300px;
      height: auto;
      background-color: #f1f1f1;
      padding: 20px;
      margin: 50px;
      border-radius: 6px;
      /* box-shadow: 0 0 5px #ccc; */
      filter: drop-shadow(0 0 5px #ccc);
    }

    .dialog-container:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -10px;
      border-width: 10px;
      border-style: solid;
      border-color: #f1f1f1 transparent transparent transparent;
      z-index: 9999;
    }

    .dialog-content {
      color: #333;
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div class="dialog-container">
    <div class="dialog-content">
      This is a dialog box with a triangle.
    </div>
  </div>
</body>
</html>

上述代码我们实现了一个对话框效果，我们加上了filter: drop-shadow(0 0 5px #ccc);这行代码，轻松就实现了加阴影的效果。

【css】通过filter实现不规则的阴影聊聊 filter 的使用

前言

filter 介绍

示例

更多用法