[英]How can I create a dashed border with gradient?
I need to create a dashed border gradient like in this picture.我需要像这张图片一样创建一个虚线边框渐变。 Here's my CSS code.
这是我的 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;
}
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.这个想法是依靠多个背景并调整每个
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>
Old answer旧答案
You can apply linear-gradient
as a background to an extern container and then use dotted or dashed border on inner container.您可以将
linear-gradient
作为背景应用到外部容器,然后在内部容器上使用虚线或虚线边框。 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).它应该是 100% 但不要忘记计算中的边框,这就是我使用
calc(100% - 4px)
的原因(上边框为 2px,下边框为 2px)。
So if you change border height value you need also to update the height accordingly.因此,如果您更改边框高度值,您还需要相应地更新高度。
Add the following rule to your CSS将以下规则添加到您的 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.