html - 透明边框半径外

Question

我需要一些帮助，我有一个带有 border-radius 的 div，我需要它在圆 div 之外是透明的。我尝试使用 :after 和大纲。使用“:之后”，边框留在 div 内，使用轮廓我无法将其四舍五入。

有人知道答案吗？

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

具有 outline 属性的 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

Answer 1

使用box-shadow代替border:

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

因为透明边框会透明下面的背景，
而如果你在 box-shadow 属性中使用 spread 值，你就可以开始了:

Example demo

另外，按照@vals 的建议，您可以使用 background-clip 将背景大小保留到 content-box 大小模型中，否则会进入默认值 边框框。

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