Html 外部透明边界半径

我需要一些帮助，我有一个具有边界半径的div，我需要它在圆div之外是透明的。我尝试了：after和outline。在“：after”之后，边界停留在div内，而在轮廓上，我无法将其圆化

有人知道答案吗

CSS:

具有大纲属性的CSS：

   div.circle { 
    outline: 4px solid rgba(255,255,255,0.3); 

    background: black; 
    width: 5em; height: 5em; 
    -moz-border-radius: 2.5em; 
    -webkit-border-radius: 2.5em; 
    border-radius: 2.5em;
}

我想要的是：

---

使用框阴影代替边框：

因为透明边框将在下面的背景中显示，
如果使用“框阴影”属性中的

spread

值，则可以：

另外，根据@VAL的建议，您可以使用

背景剪辑

将背景大小保留在

内容框

大小模型中，否则将进入默认边框框

文档：

---

如果需要，可以使用容器提供边界偏移

HTML

---

如果希望边框透明（或半透明），并且要设置黑色背景，则需要将背景设置为仅限于内部，以便可以看到边框

此属性为背景剪辑：内容框

CSS

---

请提供迄今为止您尝试过的代码，但请将您的代码放在此处…..您是否尝试过使用

不透明度

属性？能否更详细地描述您想要的内容？也许一个快速的js提琴可以帮助我们更好地理解Holakiya，你是说第二个更大的不透明度圆圈？如果可能的话，我只想用一个圆圈来做这个我只想用一个div来做。谢谢

   div.circle { 
    outline: 4px solid rgba(255,255,255,0.3); 

    background: black; 
    width: 5em; height: 5em; 
    -moz-border-radius: 2.5em; 
    -webkit-border-radius: 2.5em; 
    border-radius: 2.5em;
}

box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.51); 

<div class="border">
  <div class="inner"></div>
</div>

.border {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: transparent;  
  border: 10px solid rgba(255,255,255,.4);
}
.inner {
  width: calc(100% - 40px); 
  height: calc(100% - 40px);
  border-radius: 50%;
  background: rgba(255,255,255,.6);  
  border: 10px solid transparent;
  margin: 10px;
}

div.circle {
    background: black;
    background-clip: content-box;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: solid 5px rgba(0,0,0,0.3);
}