如何实现应用显示功能中的外层圆形元素？

从图中能看到是多层嵌套的渐变环形效果，给你分不同技术栈给出具体实现建议：

Web前端（CSS） #

• 基础渐变圆环：用border-radius: 50%配合渐变边框或阴影实现：

/* 渐变边框圆环 */
.outer-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 8px solid;
  border-image: linear-gradient(135deg, #ff6b6b, #4ecdc4) 1;
}

/* 多层嵌套圆环 */
.multi-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 
    0 0 0 8px #ff6b6b,
    0 0 0 12px #ffffff,
    0 0 0 16px #4ecdc4;
  background-color: #fff; /* 中间填充色 */
}

• 镂空式圆环：如果需要中间显示内部内容，用mask或伪元素实现透明区域：

.hollow-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 60%);
  mask: radial-gradient(circle, transparent 60%, black 60%);
}

Android平台 #

• XML Drawable方案：适合静态环形，直接在布局中引用：

<!-- res/drawable/multi_ring.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 最外层渐变环 -->
    <item>
        <shape android:shape="oval">
            <size android:width="120dp" android:height="120dp"/>
            <stroke 
                android:width="8dp" 
                android:color="@android:color/transparent"/>
            <solid android:color="@drawable/ring_gradient"/>
        </shape>
    </item>
    <!-- 中间白色环 -->
    <item android:inset="8dp">
        <shape android:shape="oval">
            <stroke 
                android:width="4dp" 
                android:color="#ffffff"/>
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
    <!-- 内层透明区域（显示内容） -->
    <item android:inset="12dp">
        <shape android:shape="oval">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
</layer-list>
<!-- ring_gradient.xml 渐变定义 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:startColor="#ff6b6b"
        android:endColor="#4ecdc4"
        android:angle="135"/>
</shape>

• Canvas动态绘制：适合需要动画或自定义逻辑的场景，在onDraw方法中绘制：

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val centerX = width / 2f
    val centerY = height / 2f
    // 外层渐变环
    val outerPaint = Paint().apply {
        shader = LinearGradient(0f, 0f, width.toFloat(), height.toFloat(), Color.RED, Color.CYAN, Shader.TileMode.CLAMP)
        style = Paint.Style.STROKE
        strokeWidth = 8f
        isAntiAlias = true
    }
    canvas.drawCircle(centerX, centerY, 60f, outerPaint)
    // 中间白色环
    val innerPaint = Paint().apply {
        color = Color.WHITE
        style = Paint.Style.STROKE
        strokeWidth = 4f
        isAntiAlias = true
    }
    canvas.drawCircle(centerX, centerY, 52f, innerPaint)
}

iOS平台 #

• UIKit方案：用CAShapeLayer配合渐变实现：

func setupRing() {
    let ringSize = CGSize(width: 120, height: 120)
    // 外层渐变环
    let outerRing = CAShapeLayer()
    outerRing.path = UIBezierPath(ovalIn: CGRect(origin: .zero, size: ringSize)).cgPath
    outerRing.fillColor = UIColor.clear.cgColor
    outerRing.strokeColor = UIColor.black.cgColor
    outerRing.lineWidth = 8
    
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [UIColor.systemRed.cgColor, UIColor.systemTeal.cgColor]
    gradientLayer.frame = CGRect(origin: .zero, size: ringSize)
    gradientLayer.mask = outerRing
    
    // 中间白色环
    let innerRing = CAShapeLayer()
    innerRing.path = UIBezierPath(ovalIn: CGRect(x: 4, y: 4, width: 112, height: 112)).cgPath
    innerRing.fillColor = UIColor.clear.cgColor
    innerRing.strokeColor = UIColor.white.cgColor
    innerRing.lineWidth = 4
    
    view.layer.addSublayer(gradientLayer)
    view.layer.addSublayer(innerRing)
}

• SwiftUI方案：更简洁的声明式实现：

var body: some View {
    ZStack {
        Circle()
            .stroke(LinearGradient(gradient: Gradient(colors: [.systemRed, .systemTeal]), startPoint: .topLeading, endPoint: .bottomTrailing), lineWidth: 8)
            .frame(width: 120, height: 120)
        Circle()
            .stroke(Color.white, lineWidth: 4)
            .frame(width: 104, height: 104)
        // 中间内容
        Text("Content")
    }
}

通用注意事项 #

• 确保宽高严格相等，避免环形变成椭圆；
• 多层环形的间距通过padding、inset或坐标偏移精确控制；
• 渐变方向可根据需求调整（线性、径向、锥形）；
• 如果需要动态效果（比如进度动画），可以通过控制strokeEnd（iOS）、clip-path（Web）或Canvas绘制范围实现。

内容的提问来源于stack exchange，提问作者Saksham Srivastava