为什么要做？

TIP

Apple的 UI Design Resources网页上，提供了 iOS 的 UI 素材下载，在素材里面提供了 iOS 圆角图标的矢量图，可以导入各种绘图软件中使用，而且提供的矢量的布点方式和 iOS 7 发布时对圆角图标描述的布点一样，所以这个矢量图的原真性就可以得到确认。

iOS 的圆角图标从宏观上看由 4 条直边和 4 条曲线形成的圆角组成,首先是曲率连续的曲线，然后能够保证曲线的圆度，让它看起来就像圆弧一样，另外我们也可以看到曲率变化具有加速度，曲率变化的状态大致可以分成五个阶段，第一阶段，也就是接近直线处，以缓慢的速度增加曲率，到达某一值进入第二阶段，也就是快速增长阶段，达到一定程度后，就连续光滑地过渡到第三阶段，以极其平缓的速度变化几乎匀速一般，也就是圆弧阶段，之后的变化过程就是反方向，第四阶段是快速降低，第五阶段是缓慢降低到 0。

预览效果：

普通圆角：

肯了个德

叠加效果

TIP

背景为红色的是普通圆角，背景为白色的是曲率圆角

肯了个德

肯了个德

实现

<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <clipPath id="clipPath">
      <path
        d="M25,0
                 C11.2,0 0,11.2 0,25
                 L0,75
                 C0,88.8 11.2,100 25,100
                 L75,100
                 C88.8,100 100,88.8 100,75
                 L100,25
                 C100,11.2 88.8,0 75,0
                 Z"
      />
    </clipPath>
    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="rgba(0, 0, 0, 0.4)" />
    </filter>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="white" :style="{ filter: 'url(#shadow)' }" />
</svg>

原理分析

1. 创建一个svg，宽高为100px，viewBox为0,0,100,100，viewBox是svg坐标系，默认左上角为原点
2. 创建一个defs，里面定义了clipPath和filter
3. 创建一个rect，宽高为100px，填充白色，filter使用url(#shadow)
4. 创建一个clipPath，宽高为100px，viewBox为0,0,100,100，path为圆角矩形
5. 利用 path 绘制圆角矩形，使用三次贝塞尔曲线绘制圆角，参考W3school

结尾

CSS博大精深，SVG博大精深，慢慢学吧，一学一个不吱声！