透明边框半径外部

Question

我需要一些帮助，我有一个带有边框半径的 div，我需要它在圆形 div 外面是透明的。我尝试使用 :after 和 outline。使用 ":after"，边框仍然在 div 内部，使用 outline 我无法得到圆角。

有人知道答案吗？

CSS:

    div.circle {
        background: black;
        width: 5em;
        height: 5em;
        -moz-border-radius: 2.5em;
        -webkit-border-radius: 2.5em;
        border-radius: 2.5em;
    }
   div.circle p {
        padding: 2em 2em 0 2em;
        color: white;
    }
    div.circle:after {
        content:'';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 2.5em;
        border: 4px solid rgba(255, 255, 255, 0.51);
    }

带有轮廓属性的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;
}

我想要的是：

http://giovannigras.be/home/img.png

- Gio

---

请提供您已经尝试过的代码 - web-tiki

但是请将你的代码放在这里.....你尝试使用过 opacity 属性了吗？ - Just code

你能更详细地描述一下你想要的吗？ 也许一个快速的JS Fiddle可以帮助我们更好地理解。 - Toby Osborne

Dholakiya，您的意思是一个透明度更高的第二个更大的圆圈吗？如果可能的话，我想只用一个圆圈来实现这个效果。 - Gio

Answer 1

使用 box-shadow 代替 border:

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

由于透明边框会使下方的背景透明，因此如果您在box-shadow属性中使用spread值，就可以解决这个问题: 示例演示 另外，正如@vals建议的那样，您可以使用background-clip来保留背景大小到content-box大小模型中，否则将进入默认的border-box。

Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

- Roko C. Buljan

Answer 2

如果您想要边框透明（或半透明），并且您设置了黑色背景，您需要将背景限定在内部，以便可以看到边框。

用于此的属性是 background-clip: content-box;

CSS

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

fiddle

- vals

Answer 3

如果需要，您可以使用容器来提供边框偏移量。

演示

HTML

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

CSS

.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;
}

- rafaelcastrocouto

---

我想要只有一个 div。不过还是谢谢。 - Gio