您可以使用简单的边框并将背景裁剪到，
content-box以在填充区域中创建透明部分：
div.circle { background: rgba(255, 255, 255, .5) content-box; padding: 10px; height: 180px; width: 180px; box-sizing: border-box; border-radius: 50%; margin:10px auto; border: 10px solid rgba(255, 255, 255, .5);}body { background: pink;}<div ></div>您也可以考虑
radial-gradient
div.circle { background: radial-gradient(farthest-side, rgba(255, 255, 255, .5) calc(100% - 20px),transparent calc(100% - 20px), transparent calc(100% - 10px),rgba(255, 255, 255, .5) calc(100% - 10px)); height: 180px; width: 180px; box-sizing: border-box; border-radius: 50%; margin:10px auto;}body { background: pink;}<div ></div>您可以轻松缩放到任意数量的边界：
div.circle { background: radial-gradient(farthest-side, #fff calc(100% - 61px),transparent calc(100% - 60px), transparent calc(100% - 51px),#fff calc(100% - 50px), #fff calc(100% - 41px),transparent calc(100% - 40px), transparent calc(100% - 31px),#fff calc(100% - 30px), #fff calc(100% - 21px),transparent calc(100% - 20px), transparent calc(100% - 11px),#fff calc(100% - 10px)); height: 180px; width: 180px; box-sizing: border-box; border-radius: 50%; margin:10px auto;}body { background: pink;}<div ></div>
