css实现border半透明backround-clip

闲着的时候在网上下载了一个登录页，准备为下一个项目先做做准备。但是做的过程中发现登录页中间login-box的部分边框呈现了半透明

在尝试了使用border-color:rgba()后还是实现不了想要的效果，最终发现了实现方式，具体如下

html

 <div login-component>
        <div class="login-box">
          <div>LOGO</div>
          <div></div>
          <div></div>
          <div></div> 
          <div></div>
        </div>
</div>

css   样式使用的是stylus，这里只是使用了少量的stylus语法，应该不影响阅读

[login-component] {
  width: 100%;
  height: 100%;
  background: url(../../assets/img/login_back.png) no-repeat center;
  .login-box {
    width: 440px;
    height: 309px;
    background-color: #fff;
    background-clip: padding-box;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -(@height / 2);
    margin-left: -(@width / 2);
    box-sizing: border-box;
    border: 5px solid rgba(0,0,0,0.2);
  }
}

重点是边框半透明

background-clip: padding-box

backround-clip会设置背景的延伸位置，具体去百度吧

使用这个属性前：

使用该属性后：