在顶部和左侧添加一个纯白色边框以获得3d效果

Question

我试图模仿这里显示的效果:

盒子顶部和左侧的边框给它一个很好的浮雕效果.我尝试了同样的以下内容:

<!-- HTML -->
<div id="nl-login">
</div>

<!-- CSS -->
*{
    margin:0;
    padding:0;
}
html{
    width:100%;
    height:100%;
}
body{
    background-color:#3E4C79;
    width:100%;
    height:100%;
}
#nl-login{
    width:400px;
    height:250px;
    background-color:#f0f0f0;
    margin:40px auto;   
    opacity:0.3;
    box-shadow:-1px -1px 2px #fff;
    border:1px solid #fff;
}

但它甚至都不接近它.我认为它与一对更好的边框和盒子阴影值有关,我似乎无法将其归零.有帮助吗？

这是一个小提琴以防万一.

Answer 1

您opacity: 0.3;在此处使用的内容会影响整个元素及其子元素。正确的方法是使用rgba()背景颜色以及rgba()边框颜色。删除右边框和下边框也会产生所需的结果（至少是接近的近似值）

#nl-login{
    width:400px;
    height:250px;
    background-color:rgba(255, 255, 255, .3);
    margin:40px auto;   
    /*box-shadow:-1px -1px 2px #fff;*/
    border:1px solid rgba(255, 255, 255, .7);
  border-right-width: 0;
  border-bottom-width: 0;
}

https://jsfiddle.net/Kyle_Sevenoaks/3mjeLo00/1/