我一直在努力制作一个看起来像这张照片的风格div但是我没有接近，如果我在css中使用'box-shadow'样式，或者是否有另一种方式。
我开始使用photoshop，我认为改为css很容易，但显然不是。这是photoshop文件（.psd）
------------------- edit ---------------------
我在photoshop中创建了另一个浮雕图层，但这次是阴影和发光。
然后我使用CSS3P将其更改为css代码，我得到的是：
body{
background-color: #949494;}
.shape4{
width: 300px;
height: 44px;
-webkit-border-radius: 10px;
-moz-border-radius: l0px;
border-radius: 10px;
background-color: #949494;
-webkit-box-shadow: 0 0 20px rgba(31,31,31,.2),
5px 9px 10px rgba(224,224,224,.65),
inset 5px 9px l0px rgba(31,31,31,.6),
inset 0 0 25px rgba(224,224,224,.25);
-moz-box-shadow: 0 0 20px rgba(31,31,31,.2),
5px 9px 10px rgba(224,224,224,.65),
inset 5px 9px 10px rgba(31,31,31,.6),
inset 0 0 25px rgba(224,224,224,.25);
box-shadow: 0 0 20px rgba(31,31,31,.2),
5px 9px 10px rgba(224,224,224,.65),
inset 5px 9px 10px rgba(31,31,31,.6),
inset 0 0 25px rgba(224,224,224,.25);}
不幸的是没有发光效果（因此不太顺畅）......我该如何解决这个问题呢？
答案 0 :(得分：3)
您只需使用3个div和box-shadows，如下所示：
#embossedboxbefore {
background-color:#777;
width: 210px;
height: 60px;
top:0px;
left:0px;
position:absolute;
-webkit-box-shadow: -1px -1px 8px 3px rgba(119,119,119,1);
-moz-box-shadow: -1px -1px 8px 3px rgba(119,119,119,1);
box-shadow: -1px -1px 8px 3px rgba(119,119,119,1);
}
#embossedbox {
background-color:#949494;
width: 200px;
height: 50px;
top:5px;
left:5px;
position:absolute;
-webkit-box-shadow: 0px 0px 15px 3px rgba(148,148,148,1);
-moz-box-shadow: 0px 0px 15px 3px rgba(148,148,148,1);
box-shadow: 0px 0px 15px 3px rgba(148,148,148,1);
}
#embossedboxafter {
background-color:#a5a5a5;
width: 205px;
height: 55px;
top:5px;
left:5px;
position:absolute;
-webkit-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1);
-moz-box-shadow: 2px 2px 8px 2px rgba(165,165,165,1);
box-shadow: 2px 2px 8px 2px rgba(165,165,165,1);
}
<div id="embossedboxbefore">
</div>
<div id="embossedboxafter">
</div>
<div id="embossedbox">
</div>
在这种情况下，您只使用一个div和多个box-shadows。要使用多个框阴影，只需在第一个阴影参数后面放一个逗号 - 在同一行上 - 然后输入第二个阴影的参数。阴影从你写入的位置以相反的顺序堆叠;您在该行上创建的最后一个阴影将位于顶部，并且该行中的第一个阴影将位于底部。
我无法让它在JSFiddle中看起来非常正确，但您可以尝试搞乱参数以使其看起来更好。我只是给你可能的解决方案，而不是为你设计。
#embossedbox {
background-color:#949494;
width: 200px;
height: 50px;
top:5px;
left:5px;
position:absolute;
-webkit-box-shadow: 0px 0px 10px 4px rgba(148,148,148,1),-4px -6px 15px 4px rgba(119,119,119,1),5px 6px 15px 3px rgba(165,165,165,1);
-moz-box-shadow: 0px 0px 10px 3px rgba(148,148,148,1),-4px -6px 15px 4px rgba(119,119,119,1),5px 6px 15px 3px rgba(165,165,165,1);
box-shadow: 0px 0px 10px 4px rgba(148,148,148,1),-4px -6px 15px 4px rgba(119,119,119,1),5px 6px 15px 3px rgba(165,165,165,1);
}
<div id="embossedbox">
</div>