如何插入滑塊下方陰影

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），依此類推。解釋這個，因爲這個答案可能對你有幫助，但對其他人也有幫助，並且糾正會以整個解決方案不起作用結束（字面上消失不見）