如何实现带渐变边框与圆角的自定义UIButton？

我之前也踩过这个坑！直接给渐变Layer加cornerRadius经常会出现圆角边缘毛躁、渐变显示不全的问题，正确的思路是用**形状图层（CAShapeLayer）**做遮罩，让渐变只显示在边框区域，同时完美适配圆角。下面是完整的实现方案：

自定义Button子类代码 #

import UIKit

class GradientBorderButton: UIButton {
    // 可外部自定义的渐变颜色组
    var gradientColors: [UIColor] = [.systemBlue, .systemPurple] {
        didSet { updateGradientLayer() }
    }
    // 边框宽度，默认1pt
    var borderWidth: CGFloat = 1.0 {
        didSet { updateShapeLayer() }
    }
    // 圆角半径，默认8pt
    var cornerRadius: CGFloat = 8.0 {
        didSet { updateShapeLayer() }
    }
    
    private let gradientLayer = CAGradientLayer()
    private let shapeLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseLayers()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 布局更新时同步调整图层尺寸和路径
        updateShapeLayer()
        gradientLayer.frame = bounds
    }
    
    private func setupBaseLayers() {
        // 配置渐变层方向
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        layer.addSublayer(gradientLayer)
        
        // 配置形状层作为遮罩：只保留边框路径，填充透明
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = .round // 可选，让边框两端更圆润
        gradientLayer.mask = shapeLayer
        
        // 按钮背景设为透明，避免遮挡渐变边框
        backgroundColor = .clear
    }
    
    private func updateGradientLayer() {
        gradientLayer.colors = gradientColors.map { $0.cgColor }
    }
    
    private func updateShapeLayer() {
        // 路径向内偏移边框宽度的一半，避免边框超出按钮范围被裁剪
        let borderPath = UIBezierPath(roundedRect: bounds.insetBy(dx: borderWidth/2, dy: borderWidth/2), cornerRadius: cornerRadius)
        shapeLayer.path = borderPath.cgPath
        shapeLayer.lineWidth = borderWidth
    }
}

关键细节说明 #

• 遮罩的作用：我们不需要整个渐变层显示，只需要它显示在边框路径上，所以用CAShapeLayer的路径作为渐变层的遮罩，精准控制渐变的显示区域。
• 路径偏移：创建路径时用insetBy是为了让边框刚好贴合按钮边界，不会出现边框一半在按钮外被裁剪的情况。
• 布局同步：在layoutSubviews里更新路径和图层尺寸，保证按钮尺寸变化（比如AutoLayout适配）时，边框和圆角能同步适配。

使用示例 #

let demoButton = GradientBorderButton(frame: CGRect(x: 50, y: 200, width: 220, height: 55))
demoButton.setTitle("渐变圆角边框", for: .normal)
demoButton.setTitleColor(.darkGray, for: .normal)
demoButton.gradientColors = [.systemPink, .systemOrange]
demoButton.borderWidth = 2.0
demoButton.cornerRadius = 16.0
view.addSubview(demoButton)

这样实现的按钮，渐变边框和圆角完全贴合，不会出现边缘模糊或渐变错位的问题。

内容的提问来源于stack exchange，提问作者mike.tihonchik