html - 画像の枠線と影が機能しない

Question

「メイン画像」の周りにボーダーとボックスの影を設定しようとしています。「小さい画像」をクリックするとメインの画像が入れ替わります。

ここで動作を確認できます。

残念ながら、メイン画像の周りに境界線と影を設定することはできません。

 box-shadow:0px 0px 30px black;
   -webkit-box-shadow:0px 0px 30px black;
   -moz-box-shadow:0px 0px 30px black;
   border: 4px solid white;

問題はどこにあり、どうすれば解決できますか?

ご協力いただきありがとうございます。

Answer 1

問題はあなたの.imgouterdivにあります。物事を見せる小さな窓のようなものです。画像はそのウィンドウと同じサイズであるため、ボックスの影が見えません。(ところで、jsbin で boxshadow を指定していませんでした)。小さい画像をクリックすると、これ.imgInner imgに boxshadow を指定すると boxshadow が表示されます。.imgouter影を表示するには、サイズを大きくする必要があります。

このようなことをしてください：http://jsfiddle.net/chanckjh/8jM9d/

Answer 2

あなたが投稿したコードは問題なく動作し、私のブラウザでも問題なく動作します。次に、リンクを見て、ソースを検索した後、CSS がページに含まれていることも、画像に適用されていることもわかりません。だから私はそれを追加しました。

divそうした後、メイン画像が含まれている にドロップシャドウを表示するためのマージン/パディングがないという事実に問題があることに気付きました30px。

これをコピーして貼りCSS付けて、動作することを確認します。

.imgOuter {
    overflow: hidden;
    width: 775px; //Adjusted Width
    height: 450px; //Adjusted Height
    padding: 20px;
}

.imgOuter img{
    box-shadow:0px 0px 15px #666;
    -webkit-box-shadow:0px 0px 15px #666; 
    -moz-box-shadow:0px 0px 15px #666;
    border: 10px solid #fff;
    margin-bottom: 45px; //Added to shift your other images away from new region
}

ページにすべての画像があり、スタイルがオフセットされていることがわかります。上記を使用するにはCSS、余白を元の場所に戻すための簡単な計算が必要になります。

作業イメージ:

Answer 3

これを試して -

.imgouter {
  border: 4px solid white;
  box-shadow:0px 0px 30px black;
}