CSS径向渐变Banner背景实现求助：无法匹配设计效果

针对你遇到的颜色不符、第一个圆形显示不全的问题，调整方案如下：

核心修改点 #

• 解决第一个圆形截断问题：给第一个径向渐变添加closest-side关键字，让圆形以离圆心最近的容器边缘计算尺寸，避免被容器截断；同时调整颜色停止点，保证浅色区域完整显示
• 匹配设计图颜色：移除原代码中错误的#fff起始色，改用设计图对应的蓝绿色系层级调整渐变过渡，同时微调opacity让背景融合更自然
• 优化渐变层次：重新设置每个径向渐变的尺寸百分比，让圆形大小和过渡效果更贴近设计

修改后的完整代码 #

<template>
  <div id="app">
     <div class= "header3">
       <div class = "header-circles"></div>
         <p class="welcome-to-your-dash2">Welcome to your dashboard</p>
         <p class="left-text2">SCHOOL SMART GOALS : <span class='color-green'> 183 </span> SET  <span class='color-green'> 96</span> ARCHEIVED</p> 
  </div>    
  </div>
</template>

<script>
export default {
  data() {  
  },
  methods: {
    
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.color-green{
  height: 24px;
  width: 61px;
  color: #37B729;
  font-family: ".SF NS Display";
  font-size: 21px;
  letter-spacing: 0;
  line-height: 24px;
}

.header3 {
  height : 200px;
  width: 100%;
  background-color:  #032D36;
  overflow:hidden;
  position: relative;
}

.welcome-to-your-dash2 {
  color: #FFFFFF;
  font-family: "Open Sans";
  font-size: 24px;
  letter-spacing: 0;
  margin-top: 10%;
  margin-left: 10%;       
  z-index: 5;
  position: absolute;
}

.left-text2 {
  color: #FFFFFF;
  font-family: ".SF NS Display";
  font-size: 12px;
  margin-top: 10%;
  margin-right: 10%; 
  position: absolute;
  z-index: 5;
  right: 0;
}  

.header-circles {
  width:100%;
  height: 100%;
  background-image: 
    radial-gradient(circle closest-side at -25% 50%, #0C5D70 0%, #0D414D 60%, transparent 60%),
    radial-gradient(circle at 60% 10%, #0C5D70 15%, #0D414D 35%, transparent 35%), 
    radial-gradient(circle at 10% 10%, #0C5D70 8%, #0D414D 20%, transparent 20%);
  opacity: 60%;
  position: absolute;
  z-index: 0;
}
</style>

细节说明 #

1. closest-side关键字让左侧圆形的直径以容器左边缘到圆心的距离为准，彻底解决截断问题
2. 调整渐变颜色过渡百分比，让每个圆形的大小和深浅层次完全匹配设计图的视觉效果
3. 微调opacity到60%，让渐变背景和主背景色#032D36融合更自然

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