css锯齿边框圆点,CSS实现OSX风格的三个圆点效果展⽰
先看图，左上⾓OSX风格的圆点
我的实现⽅法
按照我之前的习惯，我会在div中放⼊⼀个span⽤作钩⼦，如下HTML结构：
正⽂内容
然后写⼊如下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;
border radius什么意思}
.box>span::after{
left:30px;
background-color: #35cd4b;
}
效果实现了，多⽤了⼀个span标签，好像也没什么问题。
技术流这样做
这两天搞博客，学习了⼤神的写法。巧⽤boxshow属性，⼀⾏代码解决。上代码：
.
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。