css - 是否可以制作具有多个边框和阴影的按钮？

Question

这是我想用 CSS 制作的按钮

_{(来源:gyazo.com)}

忽略灰色背景

我试过裁剪中心并在顶部、左侧、右侧添加边框，但看起来仍然很奇怪。 关于如何仅使用 CSS 创建它的任何想法？

它有一个白色的阴影，实时预览:http://justxp.plutohost.net/themetheory/portfolio.html

这可能吗？

谢谢。

Answer 1

想到了这样的事情。试验颜色和字体以获得您需要的内容

a {
  display:block;
  width:200px;
  height:40px;
  background:#5a81ff;
  color:#fff;
  font-size:1.5em;
  text-align:center;
  text-decoration:none;
  border:1px solid #656565;
  border-top-color:#cacaca;
  line-height:40px;    

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow: 0px 2px 0px rgba(176, 176, 176, 1);
  -moz-box-shadow:    0px 2px 0px rgba(176, 176, 176, 1);
  box-shadow:         0px 2px 0px rgba(176, 176, 176, 1);
}​

附注工作 expm - http://jsfiddle.net/6zhDt/

p.p.s.如果您想了解更多- http://vimeo.com/31719130才华横溢的 Lea Verou 从大约第 10 分钟开始谈论带阴影的多重边界。