这就是今天要实现的效果图（颜色提取推荐使用snipaste）
代码（仅供参考，不喜勿喷， 可以在评论区展示作品）
<html>
<head>
<style>
/* Write your CSS code here */
* {
margin: 0;
padding: 0;
}
body {
background-image: repeating-radial-gradient(circle, white 10px, rgb(245, 248, 255) 100px, rgb(242, 223, 255) 200px, rgb(209, 251, 255) 300px, rgb(248, 239, 230) 400px, skyblue 500px, deepskyblue);
display: flex;
width: 100vw;
height: 100vh;
}
.container {
width: 600px;
height: 300px;
margin: auto;
background-color: white;
padding: 12px;
border-radius: 20px;
opacity: 0.9;
transition: all 1s;
}
.container:hover {
transform: scale(1.2);
}
.inner {
width: 100%;
height: 100%;
background-image: linear-gradient(to right top, rgb(251, 243, 255), rgb(254, 249, 244));
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 30%;
height: 85%;
padding: 10px;
box-sizing: border-box;
}
.title {
display: block;
font-size: 18px;
margin-bottom: 15px;
}
.symbol {
font-size: 25px;
font-weight: bolder;
}
.price {
font-size: 35px;
font-weight: bolder;
}
.explain {
font-size: 10px;
}
.content {
margin-top: 20px;
text-align: left;
font-size: 11px;
font-weight: bolder;
opacity: 0.9;
}
.btn {
margin-top: 30px;
width: 90px;
height: 40px;
border-color: transparent;
border-radius: 6px;
font-size: 12px;
font-weight: bold;
transition-property: all;
transition-duration: 1s;
}
.btn:hover {
transform: scale(1.1);
}
.btn1 {
background-color: rgb(237, 187, 255);
}
.btn2 {
background-color: rgb(174, 241, 245);
}
.btn3 {
background-color: rgb(255, 221, 182);
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<div class="item item1">
<strong class="title">Free</strong>
<span class="symbol">$</span><span class="price">0</span>
<p class="explain">Free for your whole team</p>
<p class="content">
For individuals or teams
<br>
looking to organize anything.
</p>
<button class="btn btn1">Get started</button>
</div>
<div class="item item2">
<strong class="title">Standard</strong>
<span class="symbol">$</span><span class="price">6</span>
<p class="explain">Per user per month</p>
<p class="content">
For teams that need to
<br>
manage more work.
</p>
<button class="btn btn2">Upgrade Now</button>
</div>
<div class="item item3">
<strong class="title">Premium</strong>
<span class="symbol">$</span><span class="price">12</span>
<p class="explain">Per user per month</p>
<p class="content">
Best for teams that need to
<br>
track multiple projects.
</p>
<button class="btn btn3">Try for free</button>
</div>
</div>
</div>
</body>
</html>