如何为PrimeNG的p-checkbox添加圆形悬浮阴影？

我在使用PrimeNG的p-checkbox组件时，希望实现悬浮时显示类似p-radioButton的圆形背景阴影效果。当前使用box-shadow属性会呈现方形阴影，请问有什么方法可以实现类box-shadow的圆形阴影？

当前代码 #

悬浮状态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>

效果对比 #

• 期望效果：悬浮时显示圆形背景阴影（与p-radioButton的悬浮效果一致）
• 当前效果：悬浮时显示方形阴影

解决方案 #

问题根源在于p-checkbox的核心元素默认是方形，box-shadow会继承元素的形状。要实现圆形阴影，可通过以下两种方法解决：

方法1：修改内部元素的边框半径 #

PrimeNG的p-checkbox内部包含.p-checkbox-box元素，直接给这个元素的hover状态添加圆形边框半径即可：

.p-checkbox:hover .p-checkbox-box {
    box-shadow: 0 0 0 8px #cce0ff; /* 替换为lighten(blue, 65%)对应的实际颜色值 */
    border-radius: 50%; /* 关键：将元素设为圆形，阴影会同步变成圆形 */
}

注意：此方法会让checkbox本身也变成圆形，若想保留checkbox的方形外观，可使用下面的伪元素方案。

方法2：用伪元素模拟独立圆形阴影 #

给p-checkbox容器添加伪元素，hover时显示圆形背景作为阴影，不改变checkbox本身的形状：

.p-checkbox {
    position: relative;
}

.p-checkbox:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; /* 尺寸比checkbox大，对应阴影范围 */
    height: 36px;
    border-radius: 50%;
    background-color: #cce0ff; /* 对应lighten(blue, 65%)的颜色 */
    z-index: -1; /* 将阴影置于checkbox后方 */
}

该方案既能实现和p-radioButton一致的圆形悬浮阴影，又能保留p-checkbox原本的方形样式。

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