如何将指定双段CSS盒阴影转换为iOS原生阴影效果

适配核心规则 #

iOS 原生CALayer仅支持单一层级的阴影配置，无法像CSS一样直接在同一元素上堆叠多组阴影参数，直接混合赋值会出现颜色混叠、层级错乱的问题，必须按照CSS的阴影层数拆分独立实现。
先明确两类体系的参数映射关系，避免换算误差：

• offset-x、offset-y：和CSS坐标系完全一致，x正方向向右、y正方向向下，直接赋值给shadowOffset即可，无需反向换算
• blur-radius：存在固定换算比例，CSS的模糊值约等于iOS模糊半径的2倍，比如CSS标注的4px模糊，对应iOS设置2左右的shadowRadius即可达到一致的视觉效果
• spread-radius：iOS无原生对应属性，本次待转换的CSS扩散半径为0，无需额外处理；如果遇到非0扩散值，可通过自定义shadowPath调整尺寸匹配
• 颜色通道：带透明度的颜色直接将透明度值赋值给shadowOpacity，颜色值赋值给shadowColor即可

代码实现 #

UIKit 适配方案 #

受限于CALayer单阴影的特性，需要拆分两个独立阴影层放在目标视图的底层：

1. 对应CSS中-2px -4px 4px 0 #e5e5e5的上侧浅灰阴影层

let topShadowLayer = CALayer()
topShadowLayer.frame = targetView.bounds
topShadowLayer.shadowOffset = CGSize(width: -2, height: -4)
topShadowLayer.shadowRadius = 2
topShadowLayer.shadowColor = UIColor(red: 229/255, green: 229/255, blue: 229/255, alpha: 1).cgColor
topShadowLayer.shadowOpacity = 1
// 显式设置路径避免触发离屏渲染
topShadowLayer.shadowPath = UIBezierPath(rect: targetView.bounds).cgPath

2. 对应CSS中2px 4px 4px 0 rgba(0, 0, 0, 0.25)的下侧黑色投影层

let bottomShadowLayer = CALayer()
bottomShadowLayer.frame = targetView.bounds
bottomShadowLayer.shadowOffset = CGSize(width: 2, height: 4)
bottomShadowLayer.shadowRadius = 2
bottomShadowLayer.shadowColor = UIColor.black.cgColor
bottomShadowLayer.shadowOpacity = 0.25
bottomShadowLayer.shadowPath = UIBezierPath(rect: targetView.bounds).cgPath

3. 层级对齐：将两个阴影层按顺序插入目标视图的父视图中，排列顺序为bottomShadowLayer -> topShadowLayer -> 目标视图，保证两个阴影层的尺寸和目标视图完全对齐，无尺寸差。

SwiftUI 适配方案 #

iOS 15及以上版本的SwiftUI支持直接在同一视图上堆叠多组阴影，无需拆分独立视图，直接链式调用即可：

YourTargetView()
    .frame(width: 200, height: 100)
    // 叠加对应第一个浅灰上侧阴影
    .shadow(
        color: Color(red: 229/255, green: 229/255, blue: 229/255, opacity: 1),
        radius: 2,
        x: -2,
        y: -4
    )
    // 叠加对应第二个黑色下侧阴影
    .shadow(
        color: Color.black.opacity(0.25),
        radius: 2,
        x: 2,
        y: 4
    )

常见注意事项 #

• 不要给目标视图开启masksToBounds = true，该设置会直接裁剪掉所有溢出的阴影效果。
• 所有基于CALayer的阴影配置必须显式设置shadowPath，否则会触发强制离屏渲染，在滚动列表等高频渲染场景下会出现明显卡顿。
• 视觉微调：如果实际渲染的阴影比CSS效果更虚，可将shadowRadius调低0.5；如果边缘太硬可适当调高0.5，不同iOS版本的渲染存在细微差异，小幅调整不会破坏整体视觉一致性。

参考提示：如果后续遇到带非0扩散半径的CSS阴影，只需要在生成shadowPath时把矩形四边向外扩展对应扩散半径值，即可完全匹配CSS的扩散效果。

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