Question

我正在开发一个网站，几乎唯一剩下的就是幻灯片编号指示器。可以在以下链接中查看该问题：

URL： http://parimpex.sem.lv/logistics-insurance/

VirusTotal： https://www.virustotal.com/#/url/f270075d5d8e26607cd6f06b49459e0c99a6a6c09369ffa2f77d8e23ee5d178f/detection

当前的幻灯片指示器如下所示： https://i.imgur.com/HkCUXta.png

最终结果应如下所示：https://i.imgur.com/CfdZtOS.png

我尝试过使用多个圆形框边框，但是没有这样做。

指示器的白色部分已完成，但必须有透明空间，然后是橙色边框。

请指导！

Answer 1

您的解决方案在这里：

<div class="circle"></div>

和CSS：

.circle {
    display: inline-block;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    border: 5px solid #000; 
    background-color: #fff;
    box-shadow: 0px 0px 1px 2px #fff;
}

https://jsfiddle.net/9dbza1px/1/

Answer 2

将此添加到您的css

.global_slider .flickity-page-dots .dot {
    position: relative;
}

.global_slider .flickity-page-dots .dot.is-selected:before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    left: -5px;
    top: -5px;
    border-radius: 50%;
    border: 1px solid yellow;
}

如何制作两个圆形边框？

2 个答案: