如何在css中平滑浮雕

Question

我一直在試圖製作一個樣式的div，看起來像這樣的圖片，但我沒有提出任何關閉，應該在CSS中使用'box-shadow'樣式，還是有另一種方法。

• http://golem.tk/pictures/embossed.jpg

我開始用Photoshop，我認爲這將是容易改變的CSS，但顯然它不是。這裏是Photoshop文件（.PSD）

• golem.tk/pictures/embossed.psd

-------------------編輯---------------------

我在photoshop中創建了另一個壓花層，但這次是陰影和發光。

• http://golem.tk/pictures/embossed2.psd

然後我用CSS3Ps，改變成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);} 

不幸的是沒有輝光效果（從而使其不太流暢）。 .. 我怎樣才能解決這個問題？

Answer 1

你只使用3名的div和box-shadows，像這樣：

FIDDLE

CSS

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

HTML

<div id="embossedboxbefore"> 
</div> 
<div id="embossedboxafter"> 
</div> 
<div id="embossedbox"> 
</div> 

方法二

在這種情況下，您只能使用一個div和多個方塊陰影。要使用多個陰影框，只需在第一個陰影參數之後放置一個逗號（在同一行上），然後輸入第二個陰影的參數。陰影以與您寫入位置相反的順序堆疊;您在線上創建的最後一個陰影將位於頂部，並且該線中的第一個陰影將位於底部。

我無法讓它在JSFiddle中看起來相當正確，但是您可以嘗試搞亂參數以使其看起來更好。我只是給你可能的解決方案，而不是爲你設計。

FIDDLE

CSS

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

HTML

<div id="embossedbox"> 
</div>