我如何创建带有虚线虚线的边框? [英] How i can create border dashed with gradient?

问题描述

大家好，我需要创建如图所示的边框虚线渐变.这里有我的CSS代码.请任何人帮助我.

Hi everyone I need to create border dashed gradient like in this picture.Heres my CSS code.Please anyone help me.

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

推荐答案

新答案

这是初始答案的改进版本，其中包含较少的代码.这个想法是依靠多个背景并调整 background-clip .

Here is an improvement version of the initial answer with less of code. The idea is to rely on multiple background and adjust background-clip of each one.

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

<div class="container">

</div>

<div class="container alt">

</div>

旧答案

您可以将linear-gradient作为背景应用于外部容器，然后在内部容器上使用虚线或虚线边框.根据您的需要，您必须将白色用作边框的颜色，并用作诸如此类的内容的背景:

You can apply linear-gradient as a background to an extern container and then use dotted or dashed border on inner container. As per your needs you have to use the white as color for the border and also as the background of the content like this :

.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)的原因.

You need to pay attention to the height of the inner container. It should be 100% but don't forget the border in calculation, that's why i used calc(100% - 4px) (2px for top border and 2px for bottom border).

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

So if you change border height value you need also to update the height accordingly.

这篇关于我如何创建带有虚线虚线的边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！