CSS圆角大杀器，使用滤镜构建圆角及波浪效果

梦里梦外; 2024-02-25 01:48 50阅读 0赞

#### 目录 ####

*   *   *  1，border-radius实现圆角
         *  2，filter: contrast() 配合 filter: blur() 实现圆角
         *  3，使用 filter: contrast() 配合 filter: blur() 实现波浪效果

#### 1，border-radius实现圆角 ####

通常我们加个 border-radius就可实现一个div盒子的圆角效果，如图下：

<div class="container">
      </div>
    
    
    .container {
        
      width: 300px;
      height: 80px;
      margin: auto;
      border-radius: 80px;
      background-color: #b06161;
    }

圆角效果：  
![在这里插入图片描述][4874fc1122874b82ac99f82bc4f3e535.png]

#### 2，filter: contrast() 配合 filter: blur() 实现圆角 ####

两个滤镜，它们的作用分别是：

*  filter: blur()： 给图像设置高斯模糊效果。
 *  filter: contrast()： 调整图像的对比度。

先看看之前的一个例子：  
代码：

<div class="g-container">
          <div class="g-content">
              <div class="g-filter"></div>
          </div>
      </div>
    
    
    
    .g-container {
        
        position: relative;
        width: 300px;
        height: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
        margin: auto;
    }
    
    .g-content {
        
        height: 100px;
    }
    
    .g-filter {
        
        height: 100px;
        background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #d9363e 40px, #000);
    }

得到这样一个简单的图形：  
![在这里插入图片描述][cabb4ea490ce49c3aaf6b7f7e9a8e614.png]  
看到这里，肯定会疑惑，为什么这个图形需要用 3 层 div 嵌套的方式？不是一个 div 就足够了吗？

是因为我们又要运用 filter: contrast() 和 filter: blur() 这对神奇的组合。

我们简单改造一下上述代码，仔细观察和上述 CSS 的异同：

.g-container {
        
        position: relative;
        width: 300px;
        height: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
        margin: auto;
    }
    
    .g-content {
        
        height: 100px;
        filter: contrast(20);
        background-color: white;
        overflow: hidden;
    }
    
    .g-filter {
        
        filter: blur(10px);
        height: 100px;
        background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #d9363e 40px, #d9363e);
    }

我们给 .g-content 添加了 filter: contrast(20) 和 background-color: white，给 .g-filter 添加了 filter: blur(10px)。  
我们得到了这样一个效果：  
![在这里插入图片描述][ffec422a04aa408cb26f94a636799353.png]  
通过对比度滤镜把高斯模糊的模糊边缘给干掉，将原本的直角，变成了圆角。

#### 3，使用 filter: contrast() 配合 filter: blur() 实现波浪效果 ####

能将锐利的直角转化成圆角。我们尝试一下：

<div class="b-container">
         <div class="b-inner"></div>
     </div>
    
    
    .b-container {
        
        position: relative;
        margin: auto;
        width: 500px;
        height: 200px;
        padding-top: 100px;
        filter: contrast(20);
        background-color: #fff;
        overflow: hidden;
    }
    
    .b-inner {
        
        position: relative;
        width: 1000px;
        height: 200px;
        background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #00f 21px, #00f 40px);
        background-size: 80px 100%;
        filter: blur(10px)
    }

效果：  
![在这里插入图片描述][708209d06c00454180a5e6ec9ec8b5f5.png]  
我们希望它波浪的地方的确是波了，但是我们不希望的地方，它也变成了圆角：  
![在这里插入图片描述][f81661ae10454ca1b7ea0d26e3c665dc.png]  
这是 filter: blur() 的一个问题，好在，我们是可以使用 backdrop-filter() 去规避掉这个问题的，我们简单改造下代码：

.b-container {
        
        position: relative;
        margin: auto;
        width: 500px;
        height: 200px;
        padding-top: 100px;
        filter: contrast(20);
        background-color: #fff;
        overflow: hidden;
    
        &::before {
        
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            backdrop-filter: blur(10px);
            z-index: 1;
        }
    }
    
    .b-inner {
        
        position: relative;
        width: 1000px;
        height: 200px;
        background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #00f 21px, #00f 40px);
        background-size: 80px 100%;
        filter: blur(5px)
    }

这样，我们就实现了一份完美的波浪效果：  
![在这里插入图片描述][1f699b15019848a58c9f219d11bc4067.png]  
基于这种方式实现的波浪效果，我们甚至可以给它加上动画，让他动起来，也非常的好做，简单改造下代码：

通过一个简单的位移动画，并且使之首尾帧一致，看上去就是连续的：

![在这里插入图片描述][4d3f18caaa554dbd83e36f416284841e.gif]

[4874fc1122874b82ac99f82bc4f3e535.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/09b9139bd3cb461a8529dfe1e24bacd2.png
[cabb4ea490ce49c3aaf6b7f7e9a8e614.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c360a955c594458c8f90ba9961d2301e.png
[ffec422a04aa408cb26f94a636799353.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/400c8b2a21f448e3a7e8ebe83dd46bb1.png
[708209d06c00454180a5e6ec9ec8b5f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c61a172e57c440d89379c6c555deb696.png
[f81661ae10454ca1b7ea0d26e3c665dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/d097a9cf55d1423ea24e338c02cc9f6f.png
[1f699b15019848a58c9f219d11bc4067.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/3be6647fbf014eb1a96c51d7c12ed21b.png
[4d3f18caaa554dbd83e36f416284841e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/a63c59dc3ebd4e019fe5521a8e3bdf48.png