首先实现透明的方式大家肯定都能想到opacity,但opacity会让背景及其子元素的所有内容都透明
http://www.html5code.net/webdesign/html-5396.html
https://blog.csdn.net/huiaixing/article/details/123938950
我使用的 是 before伪元素 + opacity 解决
.status-row {
display: flex;
align-items: center;
.circle-border {
margin-right: 6px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&:before {
width: 11px;
height: 11px;
border-radius: 50%;
content: "";
position: absolute;
opacity: 0.2;
background: pink;
}
}
.circle-center {
width: 5px;
height: 5px;
border-radius: 50%;
background: red;
}
}