我怎么能用渐变创建边框？

Question

大家好我需要在这张图片中创建边框虚线渐变。看看我的CSS代码。请有人帮助我。

.Rectangle-5 {
  margin: 51px 0px 0px 35px;
  display: inline-block;
  width: 370px;
  height: 280px;
  border-radius: 3px;
  border: 1px dashed;
  border-image-source: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f);
  border-image-slice: 1;
}

Answer 1

新答案

这是初始答案的改进版本，代码较少。我们的想法是依靠多个背景并调整每个背景的background-clip。

＆＃13;

＆＃13;

.container {
  display:inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border-radius:3px;
  border: 2px dotted #fff;
  background:
   linear-gradient(#fff,#fff) padding-box /* Don't extend this to border */,
   linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f) border-box; /*Border-box is not need as it's the default value*/
}
.alt {
  border: 2px dashed #fff;
}

＆＃13;

<div class="container">

</div>

<div class="container alt">

</div>

＆＃13;

＆＃13;

＆＃13;

旧答案

您可以将linear-gradient作为外部容器的背景应用，然后在内部容器上使用点缀或虚线边框。根据您的需要，你必须使用白色作为边框的颜色，也作为内容的背景，如下所示：

＆＃13;

＆＃13;

.container {
  display:inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  background-image: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f);
}

.inner {
  border: 2px dotted #fff;
  height: calc(100% - 4px);
}
.inner-alt {
  border: 2px dashed #fff;
  height: calc(100% - 4px);
}

.content {
  background: #fff;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="inner">
    <div class="content"></div>
  </div>
</div>

<div class="container">
  <div class="inner-alt">
    <div class="content"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

您需要注意内部容器的高度。它应该是100％，但不要忘记计算中的边界，这就是为什么我使用calc(100% - 4px)（顶部边框为2px，底部边框为2px）。

因此，如果您更改边框高度值，则还需要相应地更新高度。