怎样用CSS滤镜构建圆角 利用圆角实现波浪咋办
|
今天这篇给大家分享的知识是“怎样用CSS滤镜构建圆角，利用圆角实现波浪怎样做？”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“怎样用CSS滤镜构建圆角，利用圆角实现波浪怎样做？”文章能帮助大家解决问题。 一个矩形，没什么特别的，代码如下： div { width: 200px; height: 40px; background-color: #000; } 登录后复制 So easy，不过就是加个 border-radius 而已： div { width: 200px; height: 40px; + border-radius: 40px; background-color: #000; } 登录后复制 emm，这也是一个可行的方案，主要是定位会稍微有点点麻烦。那么除了这个方式以及直接使用 SVG 外，还有没有其他方法能够实现带圆角的曲线？ 有！在 CSS 中，我们还可以通过 filter: contrast() 配合 filter: blur() 这对组合来实现这个图形。 filter: contrast() 配合 filter: blur() 的奇妙化学作用 在 神奇的滤镜！巧妙实现内凹的平滑圆角 一文中，其实已经介绍过这个组合的另类用法。 单独将两个滤镜拿出来，它们的作用分别是： filter: blur()： 给图像设置高斯模糊效果。 filter: contrast()： 调整图像的对比度。 但是，当他们“合体”的时候，产生了奇妙的融合现象。 仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。 当然，重点来了，blur 与 contrast 滤镜的组合不仅能用于这种融合效果，其特殊的性质使得它们的组合可以将直角变成圆角！ 先看看之前的一个例子： 首先，我们只需要实现这样一个图形： <div class="g-container"> <div class="g-content"> <div class="g-filter"></div> </div> </div> 登录后复制.g-container { position: relative; width: 300px; height: 100px; .g-content { height: 100px;
.g-filter { height: 100px; background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #000 40px, #000); } } } 登录后复制 看到这里，肯定会疑惑，为什么这个图形需要用 3 层 div 嵌套的方式？不是一个 div 就足够了吗？ 是因为我们又要运用 filter: contrast() 和 filter: blur() 这对神奇的组合。 我们简单改造一下上述代码，仔细观察和上述 CSS 的异同： .g-container { position: relative; width: 300px; height: 100px; .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 29px, #000 40px, #000); } } } 登录后复制 我们给 .g-content 添加了 filter: contrast(20) 和 background-color: white，给 .g-filter 添加了 filter: blur(10px)。 完整的代码你可以戳这里：CodePen Demo - Smooth concave rounded corners By filter 通过滤镜实现圆角圆弧 到这里，你应该知道如何通过直角圆弧得到圆角圆弧了。就是借助 filter: contrast() 配合 filter: blur() 的组合。 直接上代码： div { position: relative; width: 250px; height: 250px; filter: contrast(20); background-color: #fff; overflow: hidden; } div::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; filter: blur(7px); border: 25px solid transparent; border-bottom: 25px solid #000; border-radius: 50%; } 登录后复制 CodePen Demo -- Arc with rounded corners 使用 filter: contrast() 配合 filter: blur() 实现波浪效果 好了，有了上面的铺垫，我们再来看一个有意思的。使用 filter: contrast() 配合 filter: blur() 实现波浪效果。 其代码也比较复杂，需要不断的调试渐变，使两个径向渐变吻合： div { position: relative; width: 400px; height: 160px; background: linear-gradient(90deg, #945700 0%, #f49714 100%); &::before, &::after { content: ""; position: absolute; top: 0; right: 0; bottom :0; } &::before { width: 10px; background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px); background-size: 20px 20px; background-position: 0 15px; } &::after { width: 15px; background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px); background-size: 20px 40px; background-position: 0 15px; } } 登录后复制 那么，如果使用 filter: contrast() 配合 filter: blur() 的话，整个过程将会变得非常简单。 这个图形使用渐变是容易得到的： div { background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px); background-size: 80px 100%; } 登录后复制 按照上文介绍的技巧，只需要应用上 filter: contrast() 配合 filter: blur()，就能将锐利的直角转化成圆角。我们尝试一下： <div class="g-container"> <div class="g-inner"></div> </div> 登录后复制.g-container { position: relative; margin: auto; height: 200px; padding-top: 100px; filter: contrast(20); background-color: #fff; overflow: hidden; } .g-inner { position: relative; height: 200px; background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px); background-size: 80px 100%; filter: blur(10px) } 登录后复制 可以写在 1 个 DIV 里面（通过元素和它的伪元素构造父子关系），也可以用 2 个，都可以，问题不大。 这是 filter: blur() 的一个问题，好在，我们是可以使用 backdrop-filter() 去规避掉这个问题的，我们简单改造下代码： .g-container { position: relative; width: 380px; 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; } } .g-inner { position: relative; width: 380px; height: 100px; background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px); background-size: 80px 100%; } 登录后复制 部分同学可能对上面的 padding-top 100px 有所疑惑，这个也是目前我所发现的一个 BUG，暂未解决，不影响使用，你可以尝试将 padding-top: 100px 替换成 height: 100px。 基于这种方式实现的波浪效果，我们甚至可以给它加上动画，让他动起来，也非常的好做，简单改造下代码： .g-inner { position: relative; - width: 380px; + width: 480px; height: 100px; background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px); background-size: 80px 100%; + animation: move 1s infinite linear; } @keyframes move { 100% { transform: translate(-80px, 0); } } 登录后复制 完整的代码，你可以戳这里：CodePen Demo -- Pure CSS Wave SVG 滤镜，让使用更简单 这就结束了吗？没有！上述双滤镜的组合固然强大，确实还是有一点麻烦。 再补充一种 SVG 滤镜的方案。这里，对于大部分场景，我们可以借助 SVG 滤镜，在 CSS 中一行引入，实现同样的功能。 借助 SVG 滤镜，其实也可以快速达成，省去了上面还需要叠加一个 filter: contrast() 的烦恼： <div class="g-triangle"></div> <svg width="0"> <filter id="blur" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="10" /> <feComponentTransfer> <feFuncA type="table" tableValues="0 0 10"/> </feComponentTransfer> </filter> </svg> 登录后复制div { border: 60px solid transparent; border-left: 120px solid #f48; filter: url(#blur); } 登录后复制 是的，利用 filter: url(xxx) 可以快速引入一个定义好的 SVG 滤镜。也可以这样，直接嵌入到 URL 中： div { border: 60px solid transparent; border-left: 120px solid #f48; filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur"); } 登录后复制 完整的代码，你可以戳这里：CodePen Demo -- triangle with rounded corners and shadow 总结一下 本文介绍了一种使用 filter: contrast() 配合 filter: blur() 的方式，将直角图形变为圆角图形的方式，在一些特定的场景下，可能有着妙用。同时，在很多场景下，可以使用 SVG 滤镜简化操作。 不过，这种方式也有几个小缺陷： 使用了 filter: contrast() 之后，图形的尺寸可能相对而言会缩小一点点，要达到固定所需尺寸的话，要一定的调试 此方式产生的图形，毕竟经过了一次 filter: blur()，放大来看图形会有一定的锯齿，可以通过调整 contrast 和 blur 的大小尽可能的去除，但是没法完全去掉 当然，我觉得这两个小缺点瑕不掩瑜，在特定的场景下，此方式还是有一定的用武之地的。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
