이 기사에서는 CSS 필터를 사용하여 둥근 모서리를 만드는 방법과 둥근 모서리를 사용하여 물결 효과를 얻는 방법에 대해 이야기하는 새로운 방법을 찾을 수 있습니다. 모든 사람에게 도움이 되기를 바랍니다.
【학습 영상 공유: css video tutorial, web front-end】
우선 이런 그래픽을 살펴보겠습니다.
사각형, 특별한 것은 없습니다. 코드는 다음과 같습니다. :
div { width: 200px; height: 40px; background-color: #000; }
이제 이 직사각형의 양쪽 끝에 둥근 모서리를 추가해야 한다면 어떻게 해야 할까요?
쉽게 border-radius
만 추가하면 됩니다. :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 滤镜的组合不仅能用于这种融合效果,其特殊的性质使得它们的组合可以将直角变成圆角!
先看看之前的一个例子:
首先,我们只需要实现这样一个图形:
<div> <div> <div></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)
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%; }좋아요, 만약 그것이 더 이상 직선이 아니라 곡선이고, 곡선의 끝이 다음과 같이 둥근 모서리를 갖고 있다면 어떨까요?

이 시점에서 저는 기본적으로 전통적인 CSS의 한계점에 도달했습니다. 통과하고 싶습니다. 하나의 속성이 이 효과를 달성할 가능성은 거의 없습니다.
물론, 시작과 끝 부분에 두 개의 의사 요소를 사용하여 두 개의 원을 구현하고 이를 중첩하는 방법이 있습니다:
emm, 이것은 또한 실행 가능한 솔루션입니다. 주로 위치 지정이 약간 번거로울 것이기 때문입니다. 그렇다면 이 방법과 SVG를 직접 사용하는 것 외에 모서리가 둥근 곡선을 얻는 다른 방법이 있습니까?
그렇습니다! CSS에서는 filter: Contrast()
와 filter: Blur()
의 조합을 통해 이 그래픽을 얻을 수도 있습니다.
filter: Contrast()
filter: Blur()
함수의 놀라운 화학적 효과
놀라운 필터! 오목하고 매끄러운 둥근 모서리를 영리하게 달성 기사에서 우리는 이미 이 조합의 대체 용도를 소개했습니다. 내 글을 자주 읽는 친구들은
filter:contrast()
와 filter:blur()
의 조합에 익숙할 것입니다. 다음은 고전적인 그림입니다: 🎜🎜🎜🎜두개를 분리해서 필터를 빼주세요 해당 기능은 다음과 같습니다. 🎜- 🎜
filter: Blur()
: 이미지에 가우시안 흐림 효과를 설정합니다. 🎜 - 🎜
filter: Contrast()
: 이미지의 대비를 조정합니다. 🎜
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-다른 방법을 찾아보세요! CSS 필터를 사용하여 둥근 모서리와 물결 모양 효과를 만드는 방법을 알아보세요.: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px); background-size: 20px 20px; background-position: 0 15px; } &::after { width: 15px; background-다른 방법을 찾아보세요! CSS 필터를 사용하여 둥근 모서리와 물결 모양 효과를 만드는 방법을 알아보세요.: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px); background-size: 20px 40px; background-position: 0 15px; } }
div { background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px); background-size: 80px 100%; }🎜다음과 같은 간단한 그래픽을 가져옵니다. 🎜🎜

filter:contrast()
와 filter:blur()
의 마법 같은 조합을 다시 사용해야 하기 때문입니다. 🎜🎜위 코드를 간단히 변환하고 위 CSS와의 유사점과 차이점을 주의 깊게 살펴보겠습니다. 🎜<div> <div></div> </div>🎜
filter: Contrast(20)
및 background-color: white를 추가했습니다. >, .g-filter
에 filter: Blur(10px)
를 추가했습니다. 🎜🎜마법같은 일이 일어났고, 다음과 같은 효과를 얻었습니다. 🎜🎜🎜🎜🎜 대비 필터를 사용하여 가우시안 블러의 흐릿한 가장자리를 제거하고, 🎜원본 직각을 둥근 모서리로 바꾸었습니다🎜, 놀랍습니다. 🎜🎜Gif를 통해 더욱 직관적인 느낌을 얻으세요: 🎜🎜🎜🎜전체 코드를 보려면 여기를 클릭하세요: 🎜CodePen 데모 - 부드럽고 오목한 둥근 모서리 필터로🎜🎜通过滤镜实现圆角圆弧
到这里,你应该知道如何通过直角圆弧得到圆角圆弧了。就是借助 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%; }
效果如下:
通过 Gif 看,更加直观:
CodePen Demo -- Arc with rounded corners
使用 filter: contrast()
配合 filter: blur()
实现波浪效果
好了,有了上面的铺垫,我们再来看一个有意思的。使用 filter: contrast()
配合 filter: blur()
实现波浪效果。
在之前,我们如果想使用纯 CSS,实现下述的波浪效果,是非常的困难的:
这种波浪效果,通常会使用在优惠券等切图中:
在之前,我们是怎么去做的呢?如果不切图,使用纯 CSS 的话,需要使用两层渐变进行叠加,大概是这样,感受一下:
其代码也比较复杂,需要不断的调试渐变,使两个径向渐变吻合:
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-다른 방법을 찾아보세요! CSS 필터를 사용하여 둥근 모서리와 물결 모양 효과를 만드는 방법을 알아보세요.: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px); background-size: 20px 20px; background-position: 0 15px; } &::after { width: 15px; background-다른 방법을 찾아보세요! CSS 필터를 사용하여 둥근 모서리와 물결 모양 효과를 만드는 방법을 알아보세요.: 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> <div></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 中一行引入,实现同样的功能。
看这样一个 DEMO,我们有这样一个三角形:
我们想通过它得到一个圆角三角形:
借助 SVG 滤镜,其实也可以快速达成,省去了上面还需要叠加一个 filter: contrast()
的烦恼:
<div></div> <svg> <filter> <fegaussianblur></fegaussianblur> <fecomponenttransfer> <fefunca></fefunca> </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:다른 방법을 찾아보세요! CSS 필터를 사용하여 둥근 모서리와 물결 모양 효과를 만드는 방법을 알아보세요./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 的大小尽可能的去除,但是没法完全去掉
当然,我觉得这两个小缺点瑕不掩瑜,在特定的场景下,此方式还是有一定的用武之地的。
原文地址:https://www.cnblogs.com/coco1s/p/16516585.html
作者:ChokCoco
更多编程相关知识,请访问:编程视频!!
위 내용은 다른 방법을 찾아보세요! CSS 필터를 사용하여 둥근 모서리와 물결 모양 효과를 만드는 방법을 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

CSS가있는 커스텀 커서는 훌륭하지만 JavaScript를 사용하여 다음 단계로 가져갈 수 있습니다. JavaScript를 사용하면 커서 상태를 전환하고 커서 내에 동적 텍스트를 배치하고 복잡한 애니메이션을 적용하며 필터를 적용 할 수 있습니다.

2025 년에 서로를 ricocheting하는 요소가있는 대화식 CSS 애니메이션은 CSS에서 Pong을 구현할 필요가 없지만 CSS의 유연성과 힘이 증가하는 것은 LEE의 의심을 강화합니다.

CSS 배경 필터 속성을 사용하여 사용자 인터페이스 스타일에 대한 팁과 요령. 여러 요소들 사이에 필터를 배경으로 배경으로 배경으로하는 방법을 배우고 다른 CSS 그래픽 효과와 통합하여 정교한 디자인을 만듭니다.

글쎄, SVG '의 내장 애니메이션 기능은 계획대로 이상 사용되지 않았다. 물론 CSS와 JavaScript는 부하를 운반 할 수있는 것 이상이지만 Smil이 이전과 같이 물에서 죽지 않았다는 것을 아는 것이 좋습니다.

예, 텍스트-랩을위한 점프 : Safari Technology Preview의 예쁜 착륙! 그러나 Chromium 브라우저에서 작동하는 방식과는 다른 점을 조심하십시오.

이 CSS- 트릭 업데이트는 Almanac, 최근 Podcast 출연, 새로운 CSS 카운터 가이드 및 귀중한 컨텐츠에 기여하는 몇 가지 새로운 저자의 추가 진전을 강조합니다.

대부분의 경우 사람들은 Tailwind ' S 단일 프로퍼 유틸리티 중 하나 (단일 CSS 선언을 변경)와 함께 Tailwind ' s @apply 기능을 보여줍니다. 이런 식으로 선보일 때 @apply는 전혀 약속하는 소리가 들리지 않습니다. 그래서 Obvio

바보처럼 배포하는 것은 배포하는 데 사용하는 도구와 복잡성에 대한 보상과 복잡성이 추가됩니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
