css filter 的contrast和blur的奇妙组合- 使用场景
圆角大杀器,使用滤镜构建圆角及波浪效果!
本文,将另辟蹊径,介绍一种使用滤镜去构建圆角的独特方式。
首先,我们来看这样一个图形:
![](https://pic4.zhimg.com/80/v2-0e865a327f091091ba30c3eda157deb7_1440w.webp)
一个矩形,没什么特别的,代码如下:
div {
width: 200px;
height: 40px;
background-color: #000;
}
如果,我们现在需要给这个矩形的两端加上圆角,像是这样,该怎么做呢:
![](https://pic3.zhimg.com/80/v2-bcf79e724efc9349b73a9979ccac84b2_1440w.webp)
So easy,不过就是加个 border-radius
而已:
div {
width: 200px;
height: 40px;
+ border-radius: 40px;
background-color: #000;
}
好,那如果,不再是直线,而是一条曲线,希望曲线两端,带有圆角,像是这样,又该怎么办呢:
![](https://pic3.zhimg.com/80/v2-79f7e0bd5823ea42029ccfb265498dd6_1440w.webp)
到这,基本上触及了传统 CSS 的天花板,想通过一个属性搞定这个效果是不太可能了。
当然,有这样一种方式,通过首尾两端,利用两个伪元素,实现两个圆形,叠加上去:
![](https://pic1.zhimg.com/80/v2-1d40b63ec8985fcc0543448d09748e94_1440w.webp)
emm,这也是一个可行的方案,主要是定位会稍微有点点麻烦。那么除了这个方式以及直接使用 SVG 外,还有没有其他方法能够实现带圆角的曲线?
有!在 CSS 中,我们还可以通过 filter: contrast()
配合 filter: blur()
这对组合来实现这个图形。
filter: contrast()
配合 filter: blur()
的奇妙化学作用
在 神奇的滤镜!巧妙实现内凹的平滑圆角 一文中,其实已经介绍过这个组合的另类用法。
经常阅读我的文章的小伙伴,对 filter: contrast()
配合 filter: blur()
的组合一定不陌生,上经典的一张图:
![动图封面](https://pic1.zhimg.com/v2-20dc93e0c3b55c9037ca243add5144b4_b.jpg)
单独将两个滤镜拿出来,它们的作用分别是:
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);
}
}
}
得到这样一个简单的图形:
![](https://pic4.zhimg.com/80/v2-1071c1f6a2339d43b5c197ffc042fc13_1440w.webp)
看到这里,肯定会疑惑,为什么这个图形需要用 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)
。
神奇的事情发生了,我们得到了这样一个效果:
![](https://pic3.zhimg.com/80/v2-1f10227bcf787990969f9a98183af75e_1440w.webp)
通过对比度滤镜把高斯模糊的模糊边缘给干掉,将原本的直角,变成了圆角,Amazing。
通过一个 Gif 图更直观的感受:
![动图封面](https://pic3.zhimg.com/v2-5bffe15db21b86f0ea8dafa0e75d3a46_b.jpg)
完整的代码你可以戳这里: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%;
}
效果如下:
![](https://pic2.zhimg.com/80/v2-e662e93b471dcc5c5cf3149fdfddd351_1440w.webp)
通过 Gif 看,更加直观:
![动图封面](https://pic4.zhimg.com/v2-137070986f78d2ebe9c5c06dacf4e823_b.jpg)
CodePen Demo -- Arc with rounded corners
使用 filter: contrast()
配合 filter: blur()
实现波浪效果
好了,有了上面的铺垫,我们再来看一个有意思的。使用 filter: contrast()
配合 filter: blur()
实现波浪效果。
在之前,我们如果想使用纯 CSS,实现下述的波浪效果,是非常的困难的:
![](https://pic1.zhimg.com/80/v2-7e27f49fc6f991a9f3326c1cf26106bc_1440w.webp)
这种波浪效果,通常会使用在优惠券等切图中:
![](https://pic3.zhimg.com/80/v2-8aece886b9123b45d8decbb97f9480de_1440w.webp)
在之前,我们是怎么去做的呢?如果不切图,使用纯 CSS 的话,需要使用两层渐变进行叠加,大概是这样,感受一下:
![动图封面](https://pic3.zhimg.com/v2-a9cb8b30677265b59fc1c0dd4ccaec42_b.jpg)
其代码也比较复杂,需要不断的调试渐变,使两个径向渐变吻合:
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()
的话,整个过程将会变得非常简单。
我们只需要实现这样一个图形:
![](https://pic1.zhimg.com/80/v2-9564552f6b96400427b435e93a79df64_1440w.webp)
这个图形使用渐变是容易得到的:
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 个,都可以,问题不大。
得到如下所示的波浪图形:
![](https://pic1.zhimg.com/80/v2-8adee386dd22260e0a25fca17e236824_1440w.webp)
我们希望它波浪的地方的确是波了,但是我们不希望的地方,它也变成了圆角:
![](https://pic3.zhimg.com/80/v2-ce971568f31f682af7a6974906d7a896_1440w.webp)
这是 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%;
}
这样,我们就实现了一份完美的波浪效果:
![](https://pic2.zhimg.com/80/v2-5ea2e8f623b022ed4b17c3f439c91f7d_1440w.webp)
部分同学可能对上面的 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 中一行引入,实现同样的功能。
看这样一个 DEMO,我们有这样一个三角形:
![](https://pic2.zhimg.com/80/v2-6359df99703faf928c42bd5aa6e7044d_1440w.webp)
我们想通过它得到一个圆角三角形:
![](https://pic3.zhimg.com/80/v2-6ffc4fdc270c8d8723e947a5745f77be_1440w.webp)
借助 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);
}
效果如下:
![](https://pic3.zhimg.com/80/v2-c96d3d581f8d7721475e58f469a1c17a_1440w.webp)
是的,利用 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 的大小尽可能的去除,但是没法完全去掉
当然,我觉得这两个小缺点瑕不掩瑜,在特定的场景下,此方式还是有一定的用武之地的。下面还有个奇淫小技巧👇🏻
图片转为黑白色:
.img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
![Pineapple](https://www.runoob.com/try/demo_source/pineapple.jpg)
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。