css 滤镜

这篇文章带你找到了一种新的方法，谈论使用CSS滤镜构建圆角的方法，并使用圆角来谈论实现波浪效果的方法，我希望能帮助你！

[学习视频分享：css视频教程，web前端]

首先，让我们来看看这样的图形：

矩形，没什么特别的，代码如下：

div {
    width: 200px;
    height: 40px;
    background-color: #000;
}

如果，我们现在需要在这个矩形的两端添加它圆角，这样，我们该怎么办：

So easy，只是加一个 border-radius 而已：

div {
    width: 200px;
    height: 40px;
    border-radius: 40px;
    background-color: #000;
}

好吧，如果不再是直线，而是曲线，希望曲线的两端，有一个圆角，像这样，又该怎么办：

在这里，它基本上触及了传统 CSS 天花板，想要通过一个属性来达到这种效果是不可能的。

当然，有一种方法，通过两端的两端，使用两个伪元素，实现两个圆，叠加：

emm，这也是一个可行的解决方案，主要是定位会有点麻烦。所以除了这种方法和直接使用之外， SVG 另外，有没有其他方法可以实现带圆角的曲线？

有！在 CSS 中间，我们也可以通过 filter: contrast() 配合 filter: blur() 这对组合来实现这个图形。

filter: contrast() 配合 filter: blur() 奇妙的化学作用

在 神奇的滤镜！巧妙实现凹面光滑的圆角 在一篇文章中，已经介绍了这种组合的另类用法。

经常阅读我的文章的小伙伴们， filter: contrast() 配合 filter: blur() 组合一定不陌生，上面一张经典的图片：

单独取出两个滤镜，它们的作用是：

• filter: blur()： 为图像设置高斯模糊效果。

• filter: contrast()： 调整图像的对比度。

然而，当它们“结合”时，就会产生奇妙的融合现象。

仔细看两个圆的交叉过程，当边缘与边缘接触时，会产生边界融合的效果，通过对比度滤镜杀死高斯模糊边缘，利用高斯模糊实现融合效果。

当然，重点来了，blur 与 contrast 滤镜的组合不仅可以用于这种融合效果，而且它们的特殊性使它们的组合能够将直角变成圆角！

先来看看前面的一个例子:

首先，我们只需要实现这样一个图形：