我需要为div块实现此梯度(请参见图片example上的示例)。有我的代码
<div class="startButtonsContainer">
<div class="button">Create account</div>
<div class="button"></div>
<div class="button"></div>
</div>
如何通过CSS做到这一点?
答案 0 :(得分:1)
类似的东西...(适应)
.startButtonsContainer{
width: 300px;
height: 80px;
padding: 15px;
position: relative;
border-radius: 0 0 50% 25px;
box-sizing: border-box;
}
.startButtonsContainer:before{
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
border-radius: 0 0 25px 25px;
z-index: -1;
background: radial-gradient(ellipse at top,rgba(30,89,156,.6) 0%,rgba(41,137,216,.6) 10%,rgba(255,0,0,0) 60% ,rgba(255,0,0,0) 100%);
}
.button{
width:100px;
height:20px;
background:blue;
margin:auto;
}
<div class="startButtonsContainer">
<div class="button">Create account</div>
<div class="button"></div>
<div class="button"></div>
</div>