Css 边框内有透明间隙的Div

我有一个大小不一的div，需要有一个透明区域，后面是一个白色边框，如图所示：

我没有问题获得正确的红色透明度和形状，但在如何获得白色边框后面的透明区域上我感到困惑。我如何才能做到这一点？

链接到

---

您可以在背景色和边框之间设置一个间隙，方法是：

• 一个因素
• 透明边框，用于在长方体阴影和背景之间形成透明间隙

• 背景剪辑：填充框

  将背景剪裁在透明边框内（否则背景颜色将溢出并通过透明边框显示，）
• 带有外线扩展半径的

  框阴影

div{
宽度：300px；
高度：300px；
边界半径：50%；
背景：rgba（255,0,0,7）；
边框：10px实心透明；
背景剪辑：填充框；
盒影：0 4px#fff；
}
/**为了演示**/
正文{背景：url（'https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg）；背景尺寸：封面；}

我也试过： 正文居中：D

body {
    background-color: #333;
    background: url('http://www.awesomeimages.net/wp-content/uploads/2011/09/4011001045_50701c52ff_b1.jpg');
    background-size: cover;
}

.border {
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    border-radius: 50%;
    border: 2px solid #FFF;
    padding: 15px;
    display: table;
}

.circle {
    width: 100%; height: 100%;
    border-radius: 1000px;
    border-radius: 50%;
    background: rgba(255,0,0,0.6);
    text-align: center;
    color: #FFF;
    display: table-cell;
    vertical-align: middle;
    font-size: 70px;

}

---

更新：

也可以使用径向渐变：

#测试{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景：
径向梯度（120像素中心处的圆圈，
rgba（255,0,0,5）100px，
rgba（255,0,0,0）100px，
rgba（255，255，255，0）105px，
rgba（255，255，255，.5）105px，
rgba（255，255，255，.5）110px，
rgba（255，255，255，0）110px
),
网址(http://lorempixel.com/output/nature-q-c-1280-960-5.jpg)中心/盖；
}

---

为白线添加固定高度、rgb背景和方框阴影。我很快就要做一个jsfiddle；）对不起…框阴影不起作用你需要使用嵌套的div你能给我们看看你的代码吗？我没有问题得到红色的透明度和形状正确。。。向我们展示代码，以便有人可以对其进行扩展。

body {
    background-color: #333;
    background: url('http://www.awesomeimages.net/wp-content/uploads/2011/09/4011001045_50701c52ff_b1.jpg');
    background-size: cover;
}

.border {
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    border-radius: 50%;
    border: 2px solid #FFF;
    padding: 15px;
    display: table;
}

.circle {
    width: 100%; height: 100%;
    border-radius: 1000px;
    border-radius: 50%;
    background: rgba(255,0,0,0.6);
    text-align: center;
    color: #FFF;
    display: table-cell;
    vertical-align: middle;
    font-size: 70px;

}