效果展示

先看图，左上角OSX风格的圆点

我的实现方法

按照我之前的习惯，我会在div中放入一个span用作钩子，如下HTML结构：

<div class="box"><span class="dot"></span>正文内容</div>

然后写入如下CSS：

.box{ position: relative; padding:40px 20px 20px;}
.box>span,.box>span::before,.box>span::after{ 
    position: absolute;
    left:10px;
    top:0px; 
    content:''; 
    display: inline-block;
    width:10px;
    height: 10px;
    border-radius: 50%;
    background: #fc625d;
}
.box>span::before{
    left:15px;
    background-color: #fdbc40;
}
.box>span::after{
    left:30px;
    background-color: #35cd4b;
}

效果实现了，多用了一个span标签，好像也没什么问题。

技术流这样做

这两天搞博客，学习了大神的写法。巧用boxshow属性，一行代码解决。

上代码：

<div class="box"></div>
<style>
.box{ position: relative; padding:40px 20px 20px;}
.box::before {
    content: '';
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    left: 12px;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    z-index: 2;
}
</div>

直接用.box的伪类，然后配合boxshadow属性。你学会了吗？

联系客服

请使用QQ扫码

请使用微信扫码