自定义导航栏按钮阴影被边界裁剪，能否让阴影超出导航栏范围？

嗨，这个问题我做项目时也踩过坑！导航栏默认会开启clipsToBounds属性，把超出自身边界的内容全部裁剪掉，所以你的按钮阴影才会被硬生生切掉。这里有几个实用的解决办法，你可以根据需求选择：

方法一：直接关闭导航栏的裁剪 #

最简单的方式就是把导航栏的clipsToBounds设为false，这样阴影就能正常超出导航栏边界显示了：

// 如果是自定义导航栏实例
navigationBar.clipsToBounds = false

// 如果使用的是系统UINavigationController
navigationController?.navigationBar.clipsToBounds = false

⚠️ 注意：这个操作会让导航栏所有子视图都能超出边界，如果你导航栏上还有其他元素，要确保它们不会意外“跑出去”影响布局。

方法二：用容器视图包裹按钮（更安全） #

如果不想影响导航栏整体的裁剪行为，推荐给按钮套一个容器视图，把阴影属性加在容器上，再把容器作为导航栏按钮使用：

// 1. 创建专门承载阴影的容器视图
let shadowContainer = UIView()
shadowContainer.translatesAutoresizingMaskIntoConstraints = false

// 2. 设置容器的阴影参数
shadowContainer.layer.shadowOffset = CGSize(width: 0, height: 12)
shadowContainer.layer.shadowColor = UIColor(red: 0.06, green: 0.09, blue: 0.13, alpha: 0.8).cgColor
shadowContainer.layer.shadowOpacity = 1.0 // 别忘了设置不透明度，默认0是看不到阴影的
shadowContainer.layer.shadowRadius = 8.0 // 可根据需求调整阴影模糊程度

// 3. 创建你的返回按钮
let backButton = UIButton()
backButton.translatesAutoresizingMaskIntoConstraints = false
// 这里添加按钮的样式、点击事件等设置，比如：
backButton.setImage(UIImage(named: "back_icon"), for: .normal)

// 4. 把按钮加到容器里，设置约束让按钮填满容器
shadowContainer.addSubview(backButton)
NSLayoutConstraint.activate([
    backButton.leadingAnchor.constraint(equalTo: shadowContainer.leadingAnchor),
    backButton.trailingAnchor.constraint(equalTo: shadowContainer.trailingAnchor),
    backButton.topAnchor.constraint(equalTo: shadowContainer.topAnchor),
    backButton.bottomAnchor.constraint(equalTo: shadowContainer.bottomAnchor)
])

// 5. 将容器设为导航栏的左按钮
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: shadowContainer)

// 6. 最后仍需关闭导航栏的裁剪（否则容器的阴影还是会被裁切）
navigationController?.navigationBar.clipsToBounds = false

这种方法的好处是，阴影只属于这个独立容器，不会影响导航栏上的其他元素，风险更低，也更灵活。

额外提醒 #

• 一定要给阴影设置shadowOpacity！默认值是0，就算其他参数都配置正确也看不到阴影效果。
• 如果使用了自定义导航栏，还要检查导航栏的背景视图（比如backgroundView）是否开启了裁剪，有的话也要关掉对应的clipsToBounds属性。

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