How i can create border dashed with gradient?

问题

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

回答1:

New answer

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>

Old answer

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>

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.

来源：https://stackoverflow.com/questions/46999865/how-i-can-create-border-dashed-with-gradient

标签

html

css

border

linear-gradients