有沒有什么方法可以制作出一個松鼠，而且它的邊緣、陰影或內(nèi)部發(fā)光也符合松鼠的形狀？

創(chuàng)建一個squircle可以通過CSS paintWorklet使用houdini來完成，但這在瀏覽器中的支持非常差，使用率僅為71.35% (2023)，這可能是因為關(guān)于paintWorklet的安全漏洞。

其他選擇包括使用SVG & lt剪輯路徑& gt使用squircle形狀，但是添加squircle邊界必須使用原始剪輯路徑重新繪制，這使得變換很困難。縮放元素時，需要重新呈現(xiàn)筆畫路徑和剪輯路徑。元素的CSS屬性需要被轉(zhuǎn)換成路徑數(shù)據(jù)。

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="-10 -10 220 220">
  <defs>
    <clipPath id="squircle-clip">
      <path d="M20,0
        L180,0
        Q200,0 200,20
        L200,180
        Q200,200 180,200
        L20,200
        Q0,200 0,180
        L0,20
        Q0,0 20,0"
        style="vector-effect: non-scaling-stroke;" 
      />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="#222" clip-path="url(#squircle-clip)"
  />
  <path d="M20,0
    L180,0
    Q200,0 200,20
    L200,180
    Q200,200 180,200
    L20,200
    Q0,200 0,180
    L0,20
    Q0,0 20,0" 
    fill="none" stroke="#484848" stroke-width="2" style="vector-effect: non-scaling-stroke;"
  />
</svg>

# # #我沒有100%明白你的意思，但我按照我的理解盡力了。請檢查我的代碼。

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="-10 -10 220 220">
  <defs>
    <clipPath id="squircle-clip">
      <path d="M20,0
      L20,0
    Q200,-10 200,150
        L200,180
        Q200,200 180,200
        L20,200
        Q0,200 0,180
        L0,20
        Q0,0 20,0"
        style="vector-effect: non-scaling-stroke;" 
      />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="#222" clip-path="url(#squircle-clip)"
  />
  <path d="M20,0
  L20,0
    Q200,-10 200,150
    L200,180
    Q200,200 180,200
    L20,200
    Q0,200 0,180
    L0,20
    Q0,0 20,0" 
    fill="none" stroke="#484848" stroke-width="4" style="vector-effect: non-scaling-stroke;"
  />
</svg>

# # #如果您不需要任何描邊或濾鏡/效果(如投影),使用裁剪路徑效果很好。

如果你的最終目標是創(chuàng)建一個類似iOS的圖標，svg可能是你最好的選擇:

.resize {
  border: 1px solid #ccc;
  resize: both;
  overflow: auto;
  width: 50%;
  max-width: 50%;
}

svg {
  width: 100%;
}

.icon {
  fill: orange;
  stroke: #000;
  stroke-width: 2px;
  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.75));
}

<h3>Resize me</h3>
<div class="resize">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    <path d="M 60 10 h 0 c 35.385 0 50 14.615 50 50 v 0 c 0 35.385 -14.615 50 -50 50 h 0 c -35.385 0 -50 -14.615 -50 -50 v 0 c 0 -35.385 14.615 -50 50 -50" />
  </svg>
</div>