1

私は現在、デザイナーが div に影を使用しているデザインのベースに取り組んでいます。私はこの種の画像を使用するのが好きではないので、CSS スキルを次のレベルに引き上げることにしました。CSS3 はまったくの初心者ですが、box-shadow を使って試してみたいと思います。この新機能を読んでいますが、正確な設計が機能していないようです。

これは私が探しているものです：

ここに画像の説明を入力

上: 1px; 右: 5px; 下: 9px; 左: 5px

デザイナーは影にさまざまなスプレッドを使用しました (まあ、このコンテキストではスプレッドと呼ばれていると思います)。私の問題は、div の側面ごとに異なるスプレッドでこれを機能させることができないということです。誰か助けてもらえますか?

前もって感謝します。

div {
    box-shadow: 0px 0px 5px #000;
}
4

3 に答える 3

2

box-shadow の意図は、割り当て先の div の影を作成することです。上下左右の特定のパーツを大きくしたり小さくしたりすることはできません

参照: http://css3gen.com/box-shadow/

これを行う唯一の方法は、変数をいじることです

例えば：

box-shadow: 0px 9px 15px 5px #888888;

このボックス シャドウは、次のボックス シャドウを生成します。

  • [0px] は左右にシフトしません
  • [9px] は 9px 下
  • [15px] には 15px のぼかしがあります (目的の効果を得るためにいろいろ試してください)
  • [5px] は幅 5px (すべての辺で) です。
  • [#888888] 灰色

別の方法は、ボーダー画像を使用することです。

于 2012-11-06T20:25:54.103 に答える
0 
-webkit-box-shadow: 0px 0px 10px 5px #888888;
-moz-box-shadow: 0px 0px 10px 5px #888888;
box-shadow: 0px 0px 10px 5px #888888;

（IE9およびIE10は、より小さなボックスシャドウをレンダリングします。以前のバージョンのエクスプローラーでは、シャドウは表示されません。）

于 2012-11-30T01:19:56.807 に答える
0

これはかなり近いです: http://jsfiddle.net/EG6FA/

div {
    ...
    box-shadow: 0px 4px 10px #777;
}​
于 2012-11-06T23:50:42.453 に答える