我正试图建立具有径向梯度背景横幅。我想我很接近，但不能使我的代码完全一样的设计。任何帮助将不胜感激。我不能得到适当的颜色和显示第一个圆圈只有一部分。
这是我试图构建的enter image description here设计
下面是我的密码笔
https://codepen.io/aneelk/pen/JjaeNqO
<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>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<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;
color: #FFFFFF;
margin-top: 10%;
margin-right: 10%;
position: absolute;
z-index: 5;
right: 0;
}
.header-circles {
width:100%;
height: 100%;
background-image: radial-gradient(circle at -25% 50%,#fff 0%, #0D414D 0%, #0C5D70 0.1%, transparent),radial-gradient(circle at 60% 10%, #0C5D70 20%, #0D414D 5%, transparent), radial-gradient(circle at 10% 10%, #0C5D70 9%, #0D414D 1%, transparent) ;
opacity:50%;
position: absolute;
z-index: 0;
}
</style>我是新的CSS梯度和目前的学习.我寻求帮助，以便我可以设计得更好.我已经添加了我的问题和目前的尝试在上面的描述. enter image description here
1条答案
按热度按时间hyrbngr71#
根据你最近的评论，我做了一个简化版本的UI，只有一个圆圈，有一个更明亮/发光的中心，只是为了让一切更容易阅读和理解。基本上，这段代码说“画一个圆，其中心在
x=10%, y=10%。圆的中心应该是#4C9DB0。在9%的圆的宽度，它应该是#0C5D70，然后我们应该交换到透明，并停留在那里的其余部分的圆圈”。documentation on radial gradients有更多的细节，格式和不同的用例。从
#4C9DB0到#0C5D70的平滑过渡是产生“辉光”效果的原因。#4C9DB0不是任何特殊的数字，我只是将您提供的颜色移到白色;您可以根据需要随时调整。