如何将3D效果制作成盒子容器以及如何选择颜色？

Question

如何更好地设计此盒子？使其页眉和页脚3D，更好的选择颜色，...

我试过这个：

以下是相关代码：

.boxfooter {
  display: block;
  border: 1px solid #eee;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #fbfcfa;
  margin:0 0 0 0;
  padding: 1px;
  color:#8EA2AA;
}
.boxheader{
  margin:6px 0 0 0;
  font-size:20px;
  display: block;
  border: 1px solid #eee;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #fbfcfa;
  margin:0 0 0 0;
  padding:4px;
}
.box {
  background-color:#fbfcfa;
  overflow-y:scroll;
  display: block;
  margin:0 0 0 0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 10px;
  color: #333;
}

Answer 1

如果你想让它更突出，可以选择像盒子一样的东西。

box-shadow:0 0 10px #000000;

至于颜色，这完全取决于你，只是试验，然后查找HEX colour codes

Answer 2

查看下面的演示。

Fiddle

我使用gradient generator来产生这种效果。

此外，如果您想要有效，请将它们包装起来，然后将此代码添加到包装器中。

.box-wrapper {
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); 
}

对于雕刻效果，您可以尝试下面的CSS。

.box-wrapper {
    box-shadow:-1px -1px 1px rgba(0, 0, 0, 0.5);
}

调整阴影的亮度/暗度。只需替换rgba的0.5，然后选择0.1到1.0范围内的数字。

0.1 - 最轻的1.0 - 最黑暗的