您可以在 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%);