DEMO

Question

我需要一些帮助，我有一个带有border-radius的div，我需要它在circle 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);
    }

带有大纲属性的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尺寸模型中，否则会进入默认的 border-box 。< / p>

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

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

Answer 3

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

DEMO

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

透明边界半径外

3 个答案:

DEMO

HTML

CSS