效果如图：
image.png
上代码，自取：
<div class="vavid-container">
<svg width="100%" height="95%">
<defs>
<!-- 定义背景的水平渐变 -->
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(30)">
<stop offset="0%" style="stop-color: #eaf7fd; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #eaf7fd; stop-opacity: 0" />
</linearGradient>
<!-- 定义边框的水平渐变 -->
<linearGradient id="borderGrad" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(13)">
<stop offset="0%" style="stop-color: #fff; stop-opacity: 1" />
<stop offset="30%" style="stop-color: #fff; stop-opacity: 0.4" />
<stop offset="60%" style="stop-color: #fff; stop-opacity: 0" />
</linearGradient>
</defs>
<!-- 创建带有圆角的矩形 -->
<rect x="20" y="20" width="90%" height="82%" rx="15" ry="15" fill="url(#bgGrad)" stroke="url(#borderGrad)" stroke-width="2" />
</svg>
<div class="content">
这里是正文内容……
</div>
</div>
.vavid-container{
width: 686px;
height: 200px;
margin: 20px auto;
background-color: #d4effd;
position: relative;
.content{
position: absolute;
top: 30px;
left: 30px;
}
}
