是否有可能用两种颜色制作圆角和点状的 div 边框,如果可以,如何实现?
目前我所做的是:
.container{
position: relative;
width: 100%;
height: 100vh;
}
.years {
display: block;
position: absolute;
width: 50px;
height: 0px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: #1c1e2e;
z-index: 999;
border-radius: 100%;
text-align: center;
padding: 60px 30px;
}
.years:before {
content: '';
position: absolute;
width: 140px;
height: 155px;
top: -17px;
left: -17px;
border-radius: 100%;
border-right: 3px dotted #000;
border-top-left-radius: 100%;
border-bottom-left-radius: 100%;
}
.years:after {
content: '';
position: absolute;
width: 140px;
height: 155px;
top: -17px;
left: -17px;
border-radius: 100%;
border-left: 3px dotted #dfbc82;
border-top-left-radius: 100%;
border-bottom-left-radius: 100%;
}
<div class="container">
<div class="years"></div>
</div>
不需要任何平滑效果,并且无法弄清如何制作像屏幕截图中的普通点...
有什么想法吗?感谢任何建议.. :/