求助：UIButton圆角渐变边框实现异常，圆角显示不正确

我来帮你搞定这个渐变边框圆角不对的问题！你遇到的核心问题是描边路径没有考虑线条宽度的居中特性，导致边框的圆角部分被截断，另外渐变层的frame设置也需要更精准。

问题分析 #

你原来的代码里，直接用按钮的bounds创建了圆角路径，但shape.lineWidth = 6时，描边是居中于路径的——也就是说线条的一半在路径外侧，一半在内侧。这就导致外侧的描边超出了按钮的范围，被截断后看起来圆角就不对了。另外用self.myBtn.frame.size设置渐变层的frame也不够准确，因为frame是相对于父视图的坐标，而bounds才是按钮自身的坐标系。

修复后的代码 #

如果是自定义UIButton，可以在layoutSubviews里处理（保证布局变化时自动更新边框）：

class GradientBorderButton: UIButton {
    var colourOne: UIColor = .blue
    var colourTwo: UIColor = .purple
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setupGradientBorder()
    }
    
    private func setupGradientBorder() {
        // 先移除旧的渐变层，避免重复添加
        layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }
        
        let gradient = CAGradientLayer()
        gradient.frame = bounds // 用按钮自身的bounds保证对齐
        gradient.colors = [colourOne.cgColor, colourTwo.cgColor]
        // 可选：设置渐变方向，这里是从左上到右下
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 1, y: 1)
        
        let lineWidth: CGFloat = 6
        let cornerRadius: CGFloat = 22
        
        // 关键：路径向内缩进lineWidth/2，让描边完全在按钮范围内
        let insetRect = bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2)
        let shape = CAShapeLayer()
        shape.lineWidth = lineWidth
        shape.path = UIBezierPath(roundedRect: insetRect, cornerRadius: cornerRadius).cgPath
        shape.strokeColor = UIColor.black.cgColor // mask只关心alpha通道，颜色不影响
        shape.fillColor = UIColor.clear.cgColor
        
        gradient.mask = shape
        layer.addSublayer(gradient)
        
        // 可选：如果按钮内部有内容，开启裁剪避免溢出
        layer.cornerRadius = cornerRadius
        clipsToBounds = true
    }
}

如果是在ViewController中使用系统UIButton，就把setupGradientBorder方法放在viewDidLayoutSubviews里调用：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    setupGradientBorderForMyBtn()
}

private func setupGradientBorderForMyBtn() {
    // 移除旧渐变层
    myBtn.layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }
    
    let gradient = CAGradientLayer()
    gradient.frame = myBtn.bounds
    gradient.colors = [colourOne.cgColor, colourTwo.cgColor]
    
    let lineWidth: CGFloat = 6
    let cornerRadius: CGFloat = 22
    let insetRect = myBtn.bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2)
    
    let shape = CAShapeLayer()
    shape.lineWidth = lineWidth
    shape.path = UIBezierPath(roundedRect: insetRect, cornerRadius: cornerRadius).cgPath
    shape.strokeColor = UIColor.black.cgColor
    shape.fillColor = UIColor.clear.cgColor
    
    gradient.mask = shape
    myBtn.layer.addSublayer(gradient)
    
    myBtn.layer.cornerRadius = cornerRadius
    myBtn.clipsToBounds = true
}

为什么这样能解决问题？ #

1. 缩进路径：通过insetBy(dx: lineWidth/2, dy: lineWidth/2)让描边路径向内收缩，保证整个描边都在按钮的bounds范围内，不会被截断。
2. 用bounds设置frame：渐变层的frame和按钮的bounds完全对齐，避免坐标偏移导致的显示问题。
3. 在layout方法中处理：确保按钮尺寸变化（比如屏幕旋转、自适应布局）时，渐变边框能自动更新。

这样处理后，你的透明按钮就能拥有完美的渐变圆角边框啦！

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