如何插入滑块下方阴影

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; 
} 

的是什么样子

附图片：

正如您所看到的阴影位于红色箭头指向的滑块顶部。

我如何修改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）类添加到该分区，让我们说.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），依此类推。解释这个，因为这个答案可能对你有帮助，但对其他人也有帮助，并且纠正会以整个解决方案不起作用结束（字面上消失不见）