CSS 圆角形状

^{访问css-tip.com了解更多 CSS 技巧}

快速创建任何具有圆角形状的小技巧。

1. 构建形状

这项任务我们只需使用……即可clip-path。您可以使用以下工具：https://bennettfeely.com/clippy/。您会找到许多预定义的形状，并且可以使用拖放功能创建自己的形状。

2. 将边角修圆

为此任务，我们应用以下 SVG 滤镜：

<filter id="round">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
  <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>

filter:url(#round);

就是这样！

我们可以为形状应用任何类型的背景。形状是使用伪元素定义的，因为我们不能直接将滤镜应用于带有 `<div>` 标签的元素clip-path。我们需要将其应用于父容器。

stdDeviation我们还可以通过调整滤波器的参数来控制半径。

这个技巧不仅限于clip-path形状，它还可以用于……

多元素形状：

多种背景形状：

等等。

只需按照你熟悉的方式构建形状，然后将过滤器应用于最上面的容器即可。

_{SVG 滤镜取自以下文章：https://css-tricks.com/gooey-effect/}

或者