0
雖然我問了兩次相同的問題，但我沒有得到任何適當的解決方案。我不知道我的代碼有什麼問題。所以在這裏我發佈了整個代碼（我知道它違背社區標準，但嚴重的是我想爲我的問題提供解決方案，我請求你們看看這個，請耐心等待）我是web開發領域的新手， 請幫幫我。箱影不能正常工作
我的問題是，我需要框陰影應用到＃主內容區域的頂面和以及左，右側（50％從上側）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
\t <div class="row" id="top-bar">
\t \t <div class="col-sm-4">
\t \t </div>
\t \t <div class="col-sm-4">
\t \t </div>
\t \t <div class="col-sm-4" >
\t \t \t <h4> Some links </h4>
\t \t </div>
\t </div>
\t <div class="row">
\t \t <div class="col-sm-2">
\t \t </div>
\t \t <div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
\t \t </div>
\t \t <div class="col-sm-4" id="link-bar">
\t \t </div>
\t \t <div class="col-sm-2">
\t \t </div>
\t </div>
\t <div class="row">
\t \t <div class="col-sm-12" id="image">
\t \t \t <img src="header.png" class="img-responsive"/>
\t \t </div>
\t </div>
\t <div class="wrapper">
\t \t <div class="line"></div>
\t \t <div class="row" >
\t \t \t <div class="col-sm-2">
\t \t \t </div>
\t \t \t <div class="col-sm-8" id="main-content-area">
\t \t \t \t <div class="col-sm-12" style="background-color:green">
\t \t \t \t <h3>Welcome </h3>
\t \t \t \t </div>
\t \t \t \t <div class="row">
\t \t \t \t <div class="col-sm-4">
\t \t \t \t \t <img src="me.jpg" class="img-responsive"/>
\t \t \t \t </div>
\t \t \t \t <div class="col-sm-4">
\t \t \t \t \t <img src="me.jpg" class="img-responsive"/>
\t \t \t \t </div>
\t \t \t \t <div class="col-sm-4">
\t \t \t \t \t <img src="me.jpg" class="img-responsive"/>
\t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-sm-4">
\t \t \t \t \t \t <img src="me.jpg" class="img-responsive"/>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-sm-4">
\t \t \t \t \t \t <img src="me.jpg" class="img-responsive"/>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-sm-4">
\t \t \t \t \t \t <img src="me.jpg" class="img-responsive"/>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="halfshadow"></div>
\t \t \t <div class="col-sm-2" >
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="row" id="footer">
\t \t <div class="col-sm-12">
\t \t \t <div class="col-sm-6">
\t \t \t \t <h4>some text........</h4>
\t \t \t </div>
\t \t \t <div class="col-sm-6">
\t \t \t < \t h4>some link </h4>
\t \t \t </div>
\t \t </div>
\t </div> \t
</div>
</body>
</html>
它工作正常，你沒有看到任何結果，因爲你應用了box-shadow的'halfshadow' div沒有任何內容。放幾個字，div和box-shadow會出現。 –
[box shadow not working]可能重複（http://stackoverflow.com/questions/41391849/box-shadow-not-working）。請不要針對同一問題提出多個問題。 –