css实现border半透明backround-clip

来源：互联网发布：图片放大器 js 编辑：程序博客网时间：2024/06/05 16:52

闲着的时候在网上下载了一个登录页，准备为下一个项目先做做准备。但是做的过程中发现登录页中间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会设置背景的延伸位置，具体去百度吧

使用这个属性前：

使用该属性后：

阅读全文

0 0