使用滤镜构建圆角的独特方式
想给图片添个圆角?直接用border-radius不就行啦!不过，如果要让曲线形的两边也有圆角咋办呢?别慌，filter: contrast()和filter: blur()这对兄弟就能搞定，快速让你的线条变成圆弧线~
div {
width: 200px;
height: 40px;
background-color: #000;
}
利用伪元素实现圆形叠加
div {
width: 200px;
height: 40px;
+ border-radius: 40px;
background-color: #000;
}
SVG 太复杂的话别担心，还有个小技巧让你在 CSS 中画出带圆角的曲线！你只需要用两个假的元素，在尾巴和开头都画上圆形，然后堆叠在一起就完成！虽然有点麻烦，但效果真心赞，值得一试！
滤镜组合实现边界融合效果
咱们上回就聊过，filter:contrast()和filter:blur()两兄弟配合起来超赞的！不仅仅可以整出漂亮的边框融合效果，甚至能将小方块变成萌萌哒圆圈儿！只需用对比度过滤器抵消Gaussian模糊的瑕疵，这事儿就轻松完成了。这个特点使得处理圆角变得超级轻松
应用滤镜创建波浪效果
在使用CSS搞个波浪效果真挺费劲，得堆好几层渐变，形状和流动都超级难以操控。但其实，我们有个简单的妙招，就是filter: contrast()加filter: blur()这俩属性就行了喔！
.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);
}
}
}
简化操作并添加动画效果
用 filter: contrast()与 filter: blur(),这两个滤镜来做出波浪效果真的是超简单还能再添点儿动画~只要稍微调整一下位置，让开始和结束的画面一致，这样波浪就能连起来变成一串更加好玩的视觉体验！
.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);
}
}
}
SVG滤镜方案补充
或者你知道，其实在CSS里加点设定就能用到我们常常使用的SVG滤镜功能！这招特别方便，而且应付CSS那些复杂的东西也能得心应手~
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滤镜玩出漂亮的圆角、波浪等效果。不论是做弧线或者波动的图形，选准滤镜都能大大省时又省力而且，聪明如你，一定知道添加SVG滤镜能使得网页设计更轻松愉快！
别干活儿就想傻使劲儿，用点策略和工具才能提高效率不是？网页也会变得更吸引人，互动起来更有趣！希望这段话能给你带来点儿新思路，咱们一起琢磨探讨！
。
评论0