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;
}

但它甚至没有接近它。我认为它与拥有更好的一对边框和盒子阴影值有关，我似乎无法将其归零。有什么帮助吗？

以下是fiddle以防万一。

Answer 1

您在这里使用parent会影响整个元素及其子元素。正确的方法是使用opacity: 0.3;背景颜色和rgba()作为边框颜色。同时删除右边框和底边框会产生所需的结果（至少近似）

rgba()

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

Answer 2

我喜欢使用两个以逗号分隔的box-shadow：

box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.4), inset 1px 1px 1px 0px rgba(255, 255, 255, 0.4);

与this fiddle一样。

在创建灯光效果时使用阴影对我来说很有意义。此外，此技术允许模糊/传播，如果您想将它们用于其他效果，则可以使边框和轮廓属性可用。

Answer 3

不要让整个元素半透明（因为它会影响所有后代元素）。在背景颜色上使用alpha。

您还可以使边框半透明（不使用任何阴影）。

#nl-login{
    width:400px;
    height:250px;
    background-color:rgba(240,240,240,0.3);
    margin:40px auto;
    border:1px solid;
    border-color:rgba(240,240,240,0.5) /*top border*/
               rgba(0,0,0,0.5)  /*right border*/
               rgba(0,0,0,0.5) /*bottom border*/
               rgba(240,240,240,0.5) /*left border*/;
}

完整示例

＆＃13;

* {
  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: rgba(240, 240, 240, 0.3);
  margin: 40px auto;
  border: 1px solid;
  border-color: rgba(240, 240, 240, 0.5) 
                rgba(0, 0, 0, 0.5) 
                rgba(0, 0, 0, 0.5) 
                rgba(240, 240, 240, 0.5);
}

＆＃13;

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

＆＃13;

Answer 4

您可以使用box-shadow执行此操作并移除border和opacity并将background添加为rgba()

＆＃13;

*{
	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: rgba(240, 240, 240, 0.3);
        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7) inset;
	margin:40px auto;	
}

＆＃13;

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

＆＃13;

Answer 5

你可以只用边框来做这件事，只需使用rgba为左边和下边框设置情人不透明度。

body {
  background-color: #3E4C79;
  margin: 0;
}
#nl-login {
  width: 400px;
  height: 50px;
  background-color: #737D9C;
  margin: 40px auto;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(62, 76, 121, 0.5);
}

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

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

5 个答案: