我需要一些帮助,我有一个带有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;
}
答案 0 :(得分:6)
使用 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
答案 1 :(得分: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);
}
答案 2 :(得分:0)
如果需要,可以使用容器提供边框偏移。
<div class="border">
<div class="inner"></div>
</div>
.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;
}