-3

ここに画像の説明を入力

メニューボタン用にこの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;
 }
4

1 に答える 1

0

次のように、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;}

あなたのメニュー作りの一助になれば幸いです。

于 2012-08-06T14:15:54.400 に答える