在jssor滑塊中為圖像添加框陰影的任何方法？

Question

我用Jssor創建了一個滑塊/幻燈片。 理想情況下，我希望每個圖像下方都有一個陰影。 我為我的img造型添加了一個盒子陰影，但陰影只出現在一些圖像上，即便如此，只在一側。 我也試過添加一個邊框，但這個東西只出現在三面（缺失的邊緣取決於圖像是縱向還是橫向）。 如果我為我的標簽設置樣式，當然縮略圖也會獲得樣式，並且所有這些都有類似的問題顯示陰影。

這是css（道歉，如果我沒有正確使用這個，我在這里新！）

img {
    padding:0px;
    margin:0px;
    border:medium solid black;
    box-shadow: 10px 10px 5px #888;
}

TIA Rob

Answer 1

你可以把圖案留在圖像上，但只有像這樣的大圖像，＃編輯陰影全方位圖像

 img[width="150"]{ padding:0px; margin:10px; border:medium solid black; box-shadow: 10px 10px 5px #888, -10px -10px 5px #888,-10px 10px 5px #888, 10px -10px 5px #888; } 

 <img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/> <img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/> <img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/> <img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/> <img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/> <img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/> 

Answer 2

<style>
    .shadow {
        padding:0px;
        margin:0px;
        border:medium solid black;
        box-shadow: 10px 10px 5px #888;
    }

</style>


<script>

    jQuery(document).ready(function ($) {
        var options = {
            $AutoPlay: true,
            $DragOrientation: 3
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //you can add shadow for outer container after jssor slider initialized.
        $("slider1_container").addClass("shadow");
        //or you can add shadow for slides container
        //$("slides1_container").addClass("shadow");
    });
</script>


<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div id="slides1_container" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        ...
    </div>
</div>