如何使用CSS创建多色边框? [英] How to create multi-color border with CSS?
本文介绍了如何使用CSS创建多色边框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在下面创建类似图像的多色边框?
How to create multi-color border like image below?
推荐答案
您可以使用:after
或:before
psuedo元素以及CSS linear-gradient
来做到这一点,如下所示:
You can do it with :after
or :before
psuedo element and css linear-gradient
as shown below:
body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}
<div class="box">Div</div>
这篇关于如何使用CSS创建多色边框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文