CSS.paintWorklet在在线编辑器可用，自建站点无法运行求解决方案

问题背景 #

使用paintWorklet绘制Squircle形状按钮，在phcode.dev、JSFiddle、CodePen等在线编辑器中均能正常显示，但部署到自建网站后完全失效；尝试使用css-paint-polyfill修复，效果不符合预期。

Chrome版本：118.0.5993.117（64位正式版）

效果对比 #

• 预期效果：圆角平滑过渡的Squircle样式按钮
• 自建网站实际效果：仅显示普通直角按钮，无Squircle效果
• 使用polyfill后效果：形状异常，无法达到预期的Squircle样式
• 在线编辑器效果：正常显示Squircle按钮

代码示例 #

HTML代码 #

<!DOCTYPE html>
<html data-theme="light">
    <head>
        <title>Phoenix Editor for the web</title>
    </head>
 
    <body>
        <a class="btn-accent">button</a>
        
        <script>
          if ("paintWorklet" in CSS) {
            CSS.paintWorklet.addModule(
              "https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
            );
          }
        </script>
    </body>
</html>

CSS代码 #

:root {
    --font-size: 1.1rem;
    
    --btn-padding: 0.6em 0.8em;
    --btn-text-transform: uppercase;
    
    --default-squircle-smoothness: 0.45;
    --default-squircle-radius: 25px;
    
    --card-squircle-smoothness: 0.45;
    --card-squircle-radius: 15px;
}

html[data-theme="light"] {
    --color-el-1: #ffffff;
    --color-el-2: #f1f4f4;
    --color-accent: #5200ff;
    
    --color-text-main: #000000;
    --color-text-alt: var(--color-el-1);
}

.btn-accent {
    text-transform: var(--btn-text-transform);
    padding: var(--btn-padding);
    outline: none;
    border: none;
    transition: all 0.09s;
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text-alt);
}

解决步骤 #

1. 补全CSS中的paintWorklet调用 #

原CSS代码未给按钮添加background-image: paint(squircle)属性，这是核心问题。在线编辑器可能自动注入了该属性，自建网站需手动添加：

.btn-accent {
    /* 保留原有样式 */
    background-image: paint(squircle);
    /* 传递自定义参数（可选，根据需求调整） */
    --squircle-radius: var(--default-squircle-radius);
    --squircle-smoothness: var(--default-squircle-smoothness);
}

2. 解决CORS限制问题 #

自建网站加载CDN的paintWorklet脚本可能触发跨域限制，可采用两种方式解决：

• 本地引用脚本：下载squircle.min.js到自建网站的静态资源目录，修改脚本引用路径为本地地址：

  CSS.paintWorklet.addModule("/static/js/squircle.min.js");
  

• 检查CDN的CORS头：通过浏览器开发者工具的Network面板，查看squircle.min.js的请求响应头，确认是否包含Access-Control-Allow-Origin。若CDN未返回该头，需更换支持CORS的CDN或使用本地文件。

3. 验证浏览器特性支持 #

确保Chrome浏览器未禁用Houdini相关功能：

1. 打开chrome://flags/
2. 搜索Experimental Web Platform features
3. 确认该选项已设置为Enabled，重启浏览器后重试

4. 正确使用polyfill #

若需兼容不支持paintWorklet的浏览器，需确保polyfill在paintWorklet加载前引入：

<script src="https://unpkg.com/css-paint-polyfill"></script>
<script>
  if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("/static/js/squircle.min.js");
  }
</script>

内容的提问来源于stack exchange，提问作者user21890925