Question

我的asp.net页面中有以下滑块：

<div class="sliderContent">
<div id="sliderFrame">
    <div id="slideIT" class="sliderHolderMain">
    <div u="slides" class="sliderHolder">
        <div>
            <img u="image" src="theImages/slider/1.jpg" />
            <div u="caption" t="CLIP|L" class="sliderCapMain">
                <div class="sliderCapBG"></div>
                <div class="sliderCapText">
                    <span class="sliderCapTextHdr">Healthy Cooking</span>
                    <br />
                    <span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
                </div>
            </div>
        </div>
        <div>
            <img u="image" src="theImages/slider/2.jpg" />
            <div u="caption" t="CLIP|L" class="sliderCapMain">
                <div class="sliderCapBG"></div>
                <div class="sliderCapText">
                    <span class="sliderCapTextHdr">Healthy Cooking</span>
                    <br />
                    <span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
                </div>
            </div>
        </div>
    </div>

    </div>
    <div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>
</div>
</div>

CSS：

.sliderContent
{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
#sliderFrame 
{
    position: relative;
    width: 100%;
    margin: 0 auto; /*center-aligned*/
}
.sliderHolderMain
{
    position: relative;
    margin: 0px;
    padding: 0px;
    float: left;
    top: 0px;
    left: 0px;
    width: 1100px;
    height: 337px;
    overflow: hidden;
}
.sliderHolder
{
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1100px;
    height: 337px;
    overflow: hidden;
}
.sliderCapMain
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 337px;
    text-align: center;
}
.sliderCapBG
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    filter: alpha(opacity=75);
}
.sliderCapText
{
    position: absolute;
    top: 5%;
    left: 5%;
    color: #000;
    text-align: left;
}
.sliderCapTextHdr
{
    color: #0074C9;
    font-weight: normal;
}
.sliderCapTextFtr
{
    color: #000;
    font-size: small;
}

附图的附图：

enter image description here

如您所见，阴影位于红色箭头指向的滑块顶部。

如何修改CSS使其显示在滑块下方，为其提供3D视图

Answer 1

2种方式：在你的HTML中，你有一个内联样式（ eeeeew !!! ），如下所示：

<div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>

同时，你的滑块有一个固定的高度，所以很容易知道它的大小。

所以你可以做到以下几点：

1）删除内联样式。真。

2）向该div添加一个类，假设为.shadow

3）将以下样式添加到CSS样式表中：

.shadow{
    width: 1100px;
    min-width: 1000px;
    height: 10px;
    position: relative;
    margin: 0px auto;
    top: 327px; //it was originally 327 but corrected to 337
    background: url('theImages/dropShadow.png') repeat-x scroll 0% 0% transparent;
    }

3.a）现在你可以使用你现在拥有的东西，这是一个.png图像（但你必须垂直翻转）

3.b）或者您可以使用box-shadow属性：

.shadow{
    width: 1100px;
    min-width: 1000px;
    height: 10px;
    position: relative;
    margin: 0px auto;
    top: 327px; //it was originally 327 but corrected to 337
    box-shadow: -20px -5px 6px rgba(0, 0, 0, 0.75) inset;
}

编辑：我看到你编辑了我的答案，但编辑得到了批准，但编辑不正确，所以我会解释一下，这样你也能理解它是如何工作的：最高位置是容器的高度元素（337px）减去 div与阴影（10px）的高度，因此位置为327px。如果你想要一个（例如）50px高度的阴影div，那么位置将是287px（337-50），依此类推。解释这一点是因为这个答案可能对你有所帮助，对其他人也有帮助，并且纠正这个问题会导致整个解决方案无法正常工作（字面上消失了）

如何在滑块下方插入阴影

1 个答案: