iOS 9/10中圆角生效但阴影不显示问题求助（附代码）

嘿，我知道你遇到的问题了——在iOS 11及以上版本，圆角加阴影能正常工作，但iOS 9和10里阴影就不见了。这其实是因为你在低版本里用的layer.mask把阴影也给裁剪掉了！

问题根源 #

在iOS 11之后，Apple新增了maskedCorners属性，配合clipsToBounds = false，可以轻松实现部分圆角同时保留阴影。但在iOS 11之前，你用CAShapeLayer作为layer.mask来实现圆角时，mask会把图层所有超出路径的内容都切掉，而阴影刚好是在视图 bounds 之外的，自然就被遮掉了。

修复方案：把阴影和内容分层处理 #

我们需要把阴影单独放在一个底层的图层上，而内容层只负责做圆角裁剪，这样两者就不会互相影响了。修改后的扩展代码如下：

extension UIView {
    func chatCellDesign(_ corners: UIRectCorner, _ cornerMask: CACornerMask, radius: CGFloat) {
        if #available(iOS 11.0, *){
            self.clipsToBounds = false
            self.layer.cornerRadius = radius
            self.layer.maskedCorners = cornerMask
            self.layer.shadowColor = UIColor.gray.cgColor
            self.layer.shadowOpacity = 1
            self.layer.shadowOffset = CGSize.zero
            self.layer.shadowRadius = 5
        }else{
            // 1. 创建专门的阴影层
            let shadowLayer = CAShapeLayer()
            // 使用和圆角一致的路径，保证阴影的圆角和视图匹配
            shadowLayer.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath
            shadowLayer.shadowColor = UIColor.gray.cgColor
            shadowLayer.shadowOpacity = 1
            shadowLayer.shadowOffset = CGSize.zero
            shadowLayer.shadowRadius = 5
            // 设置阴影层的填充色，替代原视图的背景色
            shadowLayer.fillColor = self.backgroundColor?.cgColor
            
            // 把阴影层插入到当前视图layer的最底部，避免被内容遮挡
            self.layer.insertSublayer(shadowLayer, at: 0)
            
            // 2. 给内容层设置圆角mask，确保视图内容被正确裁剪
            let maskLayer = CAShapeLayer()
            maskLayer.path = shadowLayer.path // 复用路径，保证完全匹配
            self.layer.mask = maskLayer
            
            // 原视图背景色设为透明，不然会盖住阴影层
            self.backgroundColor = .clear
        }
    }
}

几个关键细节要注意 #

• 阴影层和内容mask必须用同一个路径，不然圆角会错位
• 阴影层要插入到图层的最底部（at: 0），这样才不会被视图的内容挡住
• 把原视图的背景色设为透明，这样阴影层的填充色才能显示出来，视图的子控件不受影响
• 如果你的视图用了Auto Layout，记得在layoutSubviews里重新调用这个方法！因为视图的bounds在布局完成后才会确定，不然圆角和阴影会跟实际布局不匹配：

override func layoutSubviews() {
    super.layoutSubviews()
    // 这里传的cornerMask在iOS11以下会被忽略，不影响
    self.chatCellDesign([.topLeft,.bottomLeft,.topRight], [], radius: 5)
}

这样修改后，iOS 9和10里就能和iOS 11+一样，同时显示正确的圆角和阴影啦！

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