如何创建带边框的松鼠？ [关闭]

Question

有没有什么方法可以制作一个squircle（剪辑路径？，houdini？）但边框、阴影或内部发光也符合形状？

可以通过 CSS paintWorklet 使用 houdini 创建一个鼠形，但这非常 poor support from browsers 使用率仅为 71.35% (2023) 可能是因为 security vulnerabilities 关于绘画工作集。

其他替代方案包括 using an SVG <clipPath> with the squircle shape，但这在缩放形状时失败并且通常不是可缩放的解决方案。

Answer 1

您可以像这样调整 CSS border-radius

.squircle{
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 30px/40px ;
  background: linear-gradient(#f23f71,#d01257)
}

<div class="squircle"></div>