CSS实现OSX风格的三个圆点

稿件作者 CMS博客 2020-04-14 15:13 前端笔记

效果展示

先看图,左上角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属性。你学会了吗?

  • 分享:

文章评论(审核通过可见)

说点什么
共有1条评论

千夜

  • 2020-04-17 16:25:31
  • Windows 10
精益求精,点赞。