css实现border半透明backround-clip

最新推荐文章于 2025-10-17 10:27:28 发布

原创最新推荐文章于 2025-10-17 10:27:28 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

那些不知道的前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种实现登录页面中login-box部分边框半透明效果的方法。通过使用CSS属性如border-color搭配rgba()函数，并结合background-clip: padding-box属性来确保背景不超出边框范围，最终达到理想的设计效果。

闲着的时候在网上下载了一个登录页，准备为下一个项目先做做准备。但是做的过程中发现登录页中间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);
  }
}

重点是边框半透明