[英]How can I create a dashed border with gradient?
新答案
这是初始答案的改进版本,代码更少。 这个想法是依靠多个背景并调整每个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)。
因此,如果您更改边框高度值,您还需要相应地更新高度。
将以下规则添加到您的 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.