用svg实现div背景渐变+圆角边框渐变

效果如图：

上代码，自取：

<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;
    }
}