Safari浏览器中border-radius不生效问题求助（已加前缀仍无效）

针对你遇到的Safari下:before伪元素圆形失效的问题，可从以下几个方向调整：

• 清理display属性：你的伪元素设置了position: absolute，这类元素会自动变为块级，无需额外设置inline-flex或-webkit-inline-box，这些display值可能干扰Safari的渲染逻辑，直接删掉所有display相关声明，或统一设为display: block。

• 统一盒模型计算：添加box-sizing: border-box;（加上-webkit前缀兼容旧版Safari），让width和height包含border宽度，避免Safari在计算圆形半径时出现尺寸偏差。

• 简化border-radius声明：无需重复写多次border-radius，也不用加这么多冗余前缀，现代Safari已支持标准写法，保留border-radius: 50%;和-webkit-border-radius: 50%;即可。

• 排查CSS变量兼容性：旧版Safari（10.1及以下）对CSS变量支持不完善，可临时把var(--dusk)和var(--light-blue-grey)替换成具体颜色值测试，确认是否是变量导致的渲染异常。

• 触发硬件加速修复渲染bug：添加-webkit-transform: translateZ(0);，强制Safari启用硬件加速，解决部分渲染异常问题。

修改后的参考代码：

content: "";
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 23px;
height: 23px;
border: 7px solid white;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: var(--dusk);
outline: 1px solid var(--light-blue-grey);
position: absolute;
margin-top: -11px;
-webkit-transform: translateZ(0);
transform: translateZ(0);

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