1

Apple の Web サイトには多くの視覚的に魅力的な要素があり、駆け出しの Web 開発者が特定の要素を見て、その外観を再現する方法を知りたがる場合があります。だから私は質問を提起します（そして答えを提供します）：

Apple はどのようにして角を丸くしたドロップ シャドウ ボックスを作成しますか?

4

4 に答える 4

1

通常は、Photoshop でボックスをデザインし、既に影を付けた状態でエクスポートするだけで完了します。ただし、コードを考えて実行できる新しい CSS3 手法があります。

このウェブサイトを見る

于 2011-01-14T15:41:19.487 に答える
1

前述のように、私は答えを持っています：

効果のcssは次のとおりです

.content {
    background-color: #fff;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 4px 4px 4px 4px;
    border-color: #E5E5E5 #DBDBDB #D2D2D2;
    border-style: solid;
    border-width: 1px;
    height: 210px;
    width: 320px;
}

このコードの jsfiddle をチェックして、実際の動作を確認してください。

これが、すばやく簡単なシャドーボックスを探している人の助けになることを願っています。

〜永遠の深淵

于 2011-01-14T15:41:58.737 に答える
0

Google Chrome の InspectorまたはFirefox の Firebug 拡張機能を使用すると、使用している HTML と CSS を表示できます。

于 2011-01-14T15:43:30.207 に答える
0

追加する必要があります

-webkit-box-shadow

Webkit エンジン (safari、chrome) ベースのブラウザー用

于 2011-01-14T15:43:55.757 に答える