CSS3实现同心圆效果
效果图：
文本左侧显示一个 外圆（30px，半透明） 和 内圆（12px，实色） 的同心圆：
<!DOCTYPE html>
<html>
<head><style>.text-with-circles {position: relative;padding-left: 40px; /* 让文本不紧贴圆圈 */}.text-with-circles::before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);/* 内圆样式 */width: 12px;height: 12px;background: #48E9FF;border-radius: 50%;/* 用 box-shadow 模拟外圆 */box-shadow: 0 0 0 9px rgba(72, 233, 255, 0.20);/* 9px = (30px - 12px)/2 */}</style>
</head>
<body><p class="text-with-circles">这里是带有同心圆的文本</p>
</body>
</html>