4

www.apple.com/ipodshuffleのような影の作成について 2 つの質問があります ...

  1. Web サイトでは、白​​い背景のメイン セクションが表示されます。このセクションには、iPod Shuffle に関するすべての情報が含まれています。このメイン セクションの右、左、および下には影がありますが、上には影がありません。これをどのようにコーディングしますか？

  2. iPod Shuffles の 2 番目の画像のすぐ上 (すべてが積み重ねられており、テキストには「デザイン。ウェアラブルと同じくらい美しい」と書かれています) から飛び出しているように見える影の境界線があります。ページにフェードバックします。これをどのようにコーディングしますか？

4

2 に答える 2

13

探しているコードは次のとおりです。

.box{
  padding: 20px;
  border-radius: 5px;
  
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
<div class="box">
  Lorem ipsum
</div>

box-shadowここに関する詳細情報: http://www.css3.info/preview/box-shadow/

中央の影については、画像を使用しただけです。

于 2012-06-02T00:55:21.627 に答える