5

質問: Google マップの垂直スクロールバーの横にドロップシャドウを作成する方法は?

これは、私が話していることを正確に描いたスクリーンショットです。

ここに画像の説明を入力

これは、ブラウザ (IE、Firefox、Chrome) やプラットフォーム (Windows、Mac、Linux) に関係なく発生するようです。

4

4 に答える 4

8

これは実際には一連の5つの非常に薄いDIVであり、それぞれ不透明度が低くなり、隣り合って積み重ねられています。Firebugを使用してシャドウ領域をクリックすると、これを自分で確認できます。

于 2010-03-23T03:27:46.590 に答える
2

IE 8：F12を使用し、矢印コントロールを選択してから、目的の要素をクリックします。

この場合、5 divが重なり、幅は1〜5ピクセルで、すべて「filter：alpha（opacity = x）; opacity：0.x;」のスタイルで、xは10から02になります。

于 2010-03-23T03:30:15.350 に答える
1

ブラウザによっては、-webkit-box-shadowまたはの可能性があります。-moz-box-shadow

編集ページを確認したところ、一連のものが一列に<div>並んでいます。<div id="ds-v">ページのソース (または、DOM インスペクタのようなものを探す方が簡単です) を探します。クールな効果を得るために彼らがまとめたある種のハックである可能性が最も高いですが、これがどれほど簡単に再現できるかはわかりません.

于 2010-03-23T03:16:01.857 に答える
1

IE で PNG 透過性を取得するための 100% 信頼できる手法があり、限られた領域で使用する場合、ブラウザーが停止することはありません。彼らはこれのために垂直方向に繰り返される小さな PNG を簡単に使用できましたが、私の推測では、DIV を使用して余分な画像の使用をスキップしたのでしょう。Google マップの Web サイトでは、これは価値のある最適化です。他の Web サイトでは、これに 5 つの div を使用しても害はありませんが、オーバーレイ (側面と角) にも使用する予定がある場合は、PNG の「スプライト」の方が柔軟な場合があります。

于 2010-09-25T10:04:41.163 に答える