UIView渐变圆角边框问题：边角多余黄色背景无法消除

问题描述 #

你创建的GradientBorderView设置了黄色背景和渐变圆角边框，但边角处会露出多余的黄色背景，无法和渐变边框平滑对齐，效果如下：

原因分析 #

1. UIView背景未被裁剪：默认情况下layer.masksToBounds = false，即使设置了cornerRadius，视图的背景色不会被圆角裁剪，导致边角溢出。
2. 渐变边框路径圆角不匹配：内缩后的路径仍使用原视图的圆角半径，导致路径圆角弧度大于视图圆角，露出底层背景。

修正代码 #

class GradientBorderView: UIView {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        addGradientBorder()
    }

    private func addGradientBorder() {
        let cornerRadius: CGFloat = 24
        let borderWidth: CGFloat = 4
        let insetValue = borderWidth / 2
        
        // 开启圆角裁剪，让背景色遵守圆角约束
        self.layer.cornerRadius = cornerRadius
        self.layer.masksToBounds = true
        self.backgroundColor = .yellow
        
        // 移除已存在的渐变边框层，避免重复添加
        self.layer.sublayers?.removeAll(where: { $0.name == "gradientBorder" })
        
        // 创建渐变层
        let gradientLayer = CAGradientLayer()
        gradientLayer.name = "gradientBorder"
        gradientLayer.frame = bounds
        gradientLayer.colors = [UIColor.red.withAlphaComponent(0.2).cgColor, UIColor.black.withAlphaComponent(0.2).cgColor]
        
        // 创建形状层定义边框路径
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = borderWidth
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor
        
        // 调整路径圆角半径，适配内缩后的尺寸，保证与视图圆角对齐
        let adjustedCornerRadius = cornerRadius - insetValue
        shapeLayer.path = UIBezierPath(roundedRect: bounds.insetBy(dx: insetValue, dy: insetValue),
                                       cornerRadius: adjustedCornerRadius).cgPath
        
        gradientLayer.mask = shapeLayer
        layer.addSublayer(gradientLayer)
    }
}

关键修改点 #

• 启用masksToBounds：这是解决背景溢出最直接的方式，让视图的所有内容（包括背景色和子图层）都被圆角裁剪。
• 适配路径圆角：内缩insetValue后，路径的圆角半径需要减去该值，确保渐变边框的圆角弧度和视图本身的圆角完全匹配，避免露出底层背景。
• 常量提取：将圆角、边框宽度等参数提取为常量，便于后续统一修改和维护。

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