您可以在 PrimeNG 的方形 p 復選框中添加圓形陰影嗎

Question

使用https://primefaces.org/primeng/checkbox上的復選框時。 有沒有辦法在它后面創建一個圓形陰影。 我正在嘗試擁有一個 hover 屬性，該屬性顯示一個像下面的單選按鈕一樣的大背景圓圈。 當使用 box-shadow 時，它顯示為方形背景陰影。 是否有任何方法可以添加類似於框陰影的圓圈？

Hover 上的 CSS：

box-shadow: 0 0 0 8px lighten(blue, 65%);

HTML：

<div>
    <p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
    <label for="city1">Chicago</label>
</div>

<div>
    <p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="city2"></p-checkbox>
    <label for="city2">New York</label>
</div>

所需的陰影外觀：

當前投影外觀：

Answer 1

blur-radius是box-shadow屬性的第三個值。

這是您想要增加以獲得圓形陰影的值。 您可以在瀏覽器中對其進行測試，但我建議將其增加到至少 10px：

box-shadow: 0 0 10px 8px lighten(blue, 65%);