css - Facebook 菜单按钮 css

Question

我已经为菜单按钮尝试了这个 css 代码，但它看起来不像我想要的，任何人都可以帮助我解决这个问题。

button.menu
{
  background: #e3e3e3;
  border: 1px solid #bbb;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  padding: 5px 0px 8px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 45px;
  float:left;
  margin-left:15px;
  font-family:Segoe UI Semibold, Calibri;
  margin-top:-1.5px;

}

 button.menu:active
 {
   background: #d0d0d0;
   -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
   -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
   box-shadow: inset 0 0 1px 1px #e3e3e3;
   color: black;
 }

Answer 1

你可以用 ccs 给你的按钮一个内部阴影，如下所示：

.shadow {-moz-box-shadow:    inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow:         inset 0 0 10px #000000;}

文本可能有 IE 不支持的文本阴影

.text-shadow {text-shadow: #c0c0c0 3px 3px 5px;}

要获得圆润的边缘，您必须使用

#example1 {-moz-border-radius: 15px;border-radius: 15px;} 

希望它可以帮助您建立您的菜单！