最短css实现MacOS的菜单栏三个小圆点效果先看图需要做成这样的效果第一时间的话我可能用N个div定位或者行内块元素来

很久没写了，今天简单做个记录先看图需要做成这样的效果

第一时间的话我可能用N个div定位或者行内块元素来实现这个效果，后来我觉得没必要，后来用了伪类和box-shadow来实现，有兴趣的童鞋可以再去了解box-shadow的参数，下面贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				padding: 2px 6px;
				background-color: #ebedf1;
			}

			div:before {
				content: "";
				display: inline-block;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: #fd6458;
				box-shadow: 20px 0 0 #ffbf2b, 40px 0 0 #24cc3d, 60px 0 0 #FFFF00;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

以上的样式可以生成如下效果