Image 圆圈图像css，边框位于圆圈图像顶部

您好，我想创建一个厚厚的半透明边框，围绕css圆形图像反转

这是我的css代码：

.圆圈{ 显示：块； 宽度：500px； 高度：500px； 保证金：1em自动； 背景尺寸：封面； 背景重复：无重复； 背景位置：中心； -webkit边界半径：99em； -moz边界半径：99em； 边界半径：-99em； 边框底部：-5px实心rgba214,11,82,0.73； 边框顶部：-5px实心rgba214,11,82,0.73； 左边框：-5px实心rgba214,11,82,0.73； 右边框：-5px实心rgba214,11,82,0.73； }

---

要创建要查找的插入透明边框，需要使用插入框阴影

.圆圈{ 显示：块； 宽度：500px； 高度：500px； 保证金：1em自动； 背景尺寸：封面； 背景重复：无重复； 背景位置：中心； -webkit边界半径：99em； -moz边界半径：99em； 边界半径：-99em； 盒影：插入0.5pxRGBA214,11,82,0.73； }

---

边界Css必须包括

<div class="circle" style="background-image: 
       url('http://hk.helpstore.co.uk/images/intro.jpg')">
</div>

<style>
.circle {
    display: block;
    width: 500px;
    height: 500px;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    border: 10px solid black;
}</style>

好的，这是几个小时前澄清的 因此，您可以使用插入和无边框阴影在圆的内侧边缘绘制类似边框的阴影

.圆圈{ 显示：块； 宽度：500px； 高度：500px； 保证金：1em自动； 背景尺寸：封面； 背景重复：无重复； 背景位置：中心； 边界半径：99em； 盒影：插入0 25px rgba214,11,82,0.73；/*大小增加到25 px用于演示*/ } .borderimg{ 边框：10px实心透明； 填充：15px； 背景颜色：粉红色； -webkit边框图像：urlborder.png 30 round；/*Safari 3.1-5*/ -o-border-image:urlborder.png 30圆形；/*Opera 11-12.1*/ } W3.CSS

---

什么是反向边界？你是指镶嵌边框吗？没有底片或镶嵌边框。你能解释一下圆形图像的含义吗？你的意思是希望图像显示为圆形吗？这就是你想要的吗@GCyrillus-非常令人印象深刻D你应该把它作为答案发布。我喜欢这个解决方案，而不是我发布并删除的那个。然而，我想OP需要解释圆形图像的含义。插图和大半径似乎不太协调。图像不是圆。@KavKhalsa我知道不是，你必须澄清“反转”对你意味着什么。我知道现在你几个小时前做了……更新了答案，在bg图像的圆内设置了一个边框；