EnlightenCode

CSS 平滑圆角实现指南 🎨 ​

原文指路

介绍 📝 ​

在现代 UI 设计中，平滑圆角已经成为一种流行的设计趋势。不同于传统的 border-radius，平滑圆角（Smooth Corners）能够创造出更自然、更有机的视觉效果。本文将介绍如何使用 CSS Houdini API 实现这一效果。

效果展示 👀 ​

平滑圆角效果对比

左图为传统 border-radius 效果，右图为平滑圆角效果

实现原理 💡 ​

平滑圆角的实现主要基于 CSS Houdini Paint API，通过自定义绘制算法来实现更自然的圆角效果。这种方法使用超椭圆（Superellipse）数学公式来计算圆角的形状。

代码实现 🔨 ​

HTML 结构 ​

html
<div class="smooth-corner">
  <div class="background"></div>
  <div class="content gradient"></div>
</div>

CSS 样式 ​

css
.smooth-corner {
  position: relative;
  width: 256px;
  height: 256px;
  margin: 50px auto;
}

.background {
  width: 100%;
  padding-top: 100%;
  background: #fff;
  border-radius: 70px;
  position: absolute;
  top: 0;
}

.content {
  width: 100%;
  padding-top: 100%;
  position: absolute;
  top: 0;
}

.gradient {
  background: linear-gradient(to bottom right, deeppink, orangered);
}

/* Houdini Paint API 支持检测 */
@supports (-webkit-mask-image: paint(smooth-corners)) {
  .content.is-loaded {
    border-radius: 0;
    -webkit-mask-image: paint(smooth-corners);
    mask-image: paint(smooth-corners);
    --smooth-corners: 4; /* 控制圆角平滑度，值越大越平滑 */
  }
}

JavaScript 实现 ​

javascript
if ('paintWorklet' in CSS) {
  // 注册 Paint Worklet
  CSS.paintWorklet.addModule('./smooth-corners.js');
}

Paint Worklet 实现（smooth-corners.js） ​

javascript
if (typeof registerPaint !== 'undefined') {
  class SmoothCorners {
    static get inputProperties() {
      return ['--smooth-corners'];
    }

    paint(ctx, geom, properties) {
      const smoothFactor = Math.max(
        0.00000000001,
        Math.min(100, parseInt(properties.get('--smooth-corners')) || 4)
      );
      
      this.drawSmoothCorners(ctx, geom, smoothFactor);
    }

    drawSmoothCorners(ctx, geom, smoothFactor) {
      // ... 绘制算法实现 ...
    }
  }

  registerPaint('smooth-corners', SmoothCorners);
}

浏览器兼容性 ⚠️ ​

  • Chrome 65+
  • Edge 79+
  • Opera 52+
  • Chrome Android 65+

注意：Safari 和 Firefox 目前不支持 CSS Houdini Paint API，需要提供降级方案。

使用建议 💪 ​

  1. 始终提供降级方案，对不支持 Paint API 的浏览器使用传统的 border-radius
  2. 合理设置 --smooth-corners 值，推荐范围在 3-6 之间
  3. 注意性能影响，在高频动画场景下谨慎使用

扩展应用 🚀 ​

平滑圆角不仅可以应用于基础形状，还可以：

  • 制作自适应的 UI 组件
  • 创建独特的按钮设计
  • 实现动态变化的形状过渡

参考资源 📚 ​

总结 🎉 ​

CSS 平滑圆角是现代 Web 设计中的一个优秀实践，通过 CSS Houdini Paint API 的能力，我们可以实现更自然、更美观的 UI 效果。虽然目前浏览器兼容性还有限制，但随着时间推移，这项技术必将得到更广泛的应用。