如图
圆都好实现,但是透明效果的border该如何实现呢?
可以直接
box-shadow: inset xxxx rgba()
或者要兼容性的话
dom {
position: relative;
border-radius: 50%;
}
dom::after {
position: absolute;
top: N;
left: N;
right: N;
bottom: N;
border-radius: 50%;
background: transparent;
border: N solid /* 颜色 */;
opacity: /* 透明度 */;
}
这种半透明么,用rgba颜色
border:4px solid rgba(255,0,0,.3);
当然IE浏览器表示我写的这个答案蛮搞笑滴
rgba 的第4个参数,妥妥的
box-shadow
可能更合适一点
<style type="text/css">
.outer {
padding: 2em;
background-color: #ccc;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #F36A22;
box-shadow: 0 0 0 10px rgba(243, 106, 34, .4);
}
</style>
<div class="outer">
<div class="circle"></div>
</div>