问题

我的代码：

<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->

<!-- 语言：lang-css -->
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #000000;
}

.module-border-wrap {
  max-width: 320px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(130deg, rgba(248,253,254,1) 50%, rgba(33,186,227,1) 100%);
  padding: 6px;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}

.module {
  background: #ffffff;
  color: #000000;
  padding: 2rem;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}

.w-100{
  width:100;
}
.p-0{
  padding:0;
}
.relative{
  position: relative;
}
.curved{
  border-radius: 30px 30px 0 30px;
}

<!-- 语言：lang-html -->
<div class="module-border-wrap">
   <div class="module p-0 relative curved">
      <img src="https://picsum.photos/300/200" class="w-100 curved" alt="">
   </div>
</div>

<!-- 结束代码片段 -->

到目前为止，我能够获得渐变效果，但是它显示在图像的外面，不像附带的屏幕截图中那样，渐变边框在图像上方。

jsfiddle

<details>
<summary>英文:</summary>

My code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

     body {
      height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      background: #000000;
    }

    .module-border-wrap {
      max-width: 320px;
      padding: 1rem;
      position: relative;
      background: linear-gradient(130deg, rgba(248,253,254,1) 50%, rgba(33,186,227,1) 100%);
      padding: 6px;
      border-radius: 1.5rem 1.5rem 0 1.5rem;
    }

    .module {
      background: #ffffff;
      color: #000000;
      padding: 2rem;
      border-radius: 1.5rem 1.5rem 0 1.5rem;
    }

    .w-100{
      width:100;
    }
    .p-0{
      padding:0;
    }
    .relative{
      position: relative;
    }
    .curved{
      border-radius: 30px 30px 0 30px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;module-border-wrap&quot;&gt;
       &lt;div class=&quot;module p-0 relative curved&quot;&gt;
          &lt;img src=&quot;https://picsum.photos/300/200&quot; class=&quot;w-100 curved&quot; alt=&quot;&quot;&gt;
       &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

So far, I am able to get the gradient, however, its showing outside of image, unlike in the attached screenshot, where the gradient border is over the image itself.

[jsfiddle][1]

[![enter image description here][2]][2]


  [1]: https://jsfiddle.net/0hL213uv/20/
  [2]: https://i.stack.imgur.com/RAZMq.png

</details>


# 答案1
**得分**: 3

你可以尝试使用一个伪元素和多个背景。

<details>
<summary>英文:</summary>

You can try using one pseudo element and multiple backgrounds



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      background: #000000;
    }

    .box {
      border-radius: 1.5rem 1.5rem 0 1.5rem;
      overflow: hidden;
      display: flex;
      position: relative;
    }
    .box:before {
      content:&quot;&quot;;
      position:absolute;
      inset: 0;
      --g: #0000 1.8rem,#21bae3; /* update the color here */
      --t: 10px; /* the thickness of the gradient */
      background:
       linear-gradient( 90deg,var(--g)) bottom/100% var(--t),
       linear-gradient(180deg,var(--g)) right /var(--t) 100%;
      background-repeat: no-repeat;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;box&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/300/200&quot;  &gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



</details>