如何实现透明效果的border呢？

Question

如图

圆都好实现，但是透明效果的border该如何实现呢？

Answer 1

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>

Answer 2

这种半透明么，用rgba颜色

Answer 3

可以直接

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: /* 透明度 */;
}

Answer 4

rgba 的第4个参数，妥妥的

Answer 5

border:4px solid rgba(255,0,0,.3);
当然IE浏览器表示我写的这个答案蛮搞笑滴