我如何创建带有渐变的虚线边框？

Question

大家好，我需要像这样创建边框虚线渐变 picture.Heres 我的 CSS code.Please 任何人都可以帮助我。

.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。

.container {
  display:inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border-radius:3px;
  border: 2px dotted #fff;
  background:
   linear-gradient(#fff 0 0) padding-box,
   linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f) border-box; 
}
.alt {
  border: 2px dashed #fff;
}

<div class="container">

</div>

<div class="container alt">

</div>

旧答案

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

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

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

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

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

Answer 2

将以下规则添加到您的 CSS

.Rectangle-5{
  border: 2px dotted #fff;
  background: linear-gradient(#fff,#fff) padding-box,
   linear-gradient(92.35deg, #3370fe 1.28%, #00e599 98.95%) border-box;
}

我如何创建带有渐变的虚线边框？

How i can create border dashed with gradient?

html

css

border

linear-gradients