盒子阴影不能正常工作

时间：2016-12-30 10:53:52

标签： html css box-shadow

虽然我已经两次提出同样的问题，但我没有得到任何适当的解决方案。我不知道我的代码有什么问题。所以在这里我发布了整个代码（我知道它反对社区标准，但我认真地想要解决我的问题，我要求你们看看这个，请保持耐心）我是网络开发领域的新手，请帮帮我。

我的问题是我需要将＃shadow-content-area的盒子阴影应用到它的顶部以及左侧和右侧（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">
	<div class="row" id="top-bar">
		<div class="col-sm-4">
		</div>
		<div class="col-sm-4">
		</div>
		<div class="col-sm-4" >
			<h4> Some links </h4>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-2">
		</div>
		<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
		</div>
		<div class="col-sm-4"  id="link-bar">
		</div>
		<div class="col-sm-2">
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12" id="image">
			<img src="header.png" class="img-responsive"/>
		</div>
	</div>
	<div class="wrapper">
		<div class="line"></div>
		<div class="row" >
			<div class="col-sm-2">
			</div>
			<div class="col-sm-8" id="main-content-area">
				<div class="col-sm-12" style="background-color:green">
				<h3>Welcome </h3>
				</div>
				<div class="row">
				<div class="col-sm-4">
					<img src="me.jpg" class="img-responsive"/>
				</div>
				<div class="col-sm-4">
					<img src="me.jpg" class="img-responsive"/>
				</div>
				<div class="col-sm-4">
					<img src="me.jpg" class="img-responsive"/>
				</div>
				</div>
				<div class="row">
					<div class="col-sm-4">
						<img src="me.jpg" class="img-responsive"/>
					</div>
					<div class="col-sm-4">
						<img src="me.jpg" class="img-responsive"/>
					</div>
					<div class="col-sm-4">
						<img src="me.jpg" class="img-responsive"/>
					</div>
				</div>
			</div>
			<div class="halfshadow"></div>
			<div class="col-sm-2" >
			</div>
		</div>
	</div>
	<div class="row" id="footer">
		<div class="col-sm-12">
			<div class="col-sm-6">
				<h4>some text........</h4>
			</div>
			<div class="col-sm-6">
			<	h4>some link </h4>
			</div>
		</div>
	</div>	    
</div>
</body>
</html>

5 个答案:

答案 0 :(得分：1)

#main-content-area{
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}

或者你也可以选择

#main-content-area
 {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 15px 1px 5px #888888;
}

答案 1 :(得分：0)

它不会显示。因为div元素的框阴影是空的。我只是添加了一些文字和super.setValue(value, forKey: key) 

margin-top
#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{
  margin-top:20px;
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 10px 0px 10px rgba(150, 0, 0, 0.5);
}

#footer{
background-color:green;
position:relative;
}

答案 2 :(得分：0)

在我的示例中解释每个事物的框阴影值是： 水平长度：1px 垂直长度：4px 模糊半径：16px 传播半径：15px

CSS： box-shadow：1px 4px 16px 15px rgba（82,43,136,1）;

答案 3 :(得分：0)

如果要将box-shadow属性应用于#main-content-area div，则必须基本...将此属性添加到css文件中的#main-content-area div中。

它将在左侧，右侧和底侧应用阴影效果：

box-shadow: 0 10px 10px 10px rgba(0, 0, 230, 0.5);

如果您希望阴影仅显示在底部和右侧，请使用：

box-shadow: 10px 10px 10px rgba(0, 0, 230, 0.5);

Codepen ：http://codepen.io/anon/pen/VmoNWJ

答案 4 :(得分：0)

＆＃13;
＆＃13; 
<!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;
box-shadow : -10px 0px 10px 0px rgba(0,0,0,0.5),10px 0px 10px 0px rgba(0,0,0,0.5),0px -10px 10px 0px rgba(0,0,0,0.5);  
}
.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">
	<div class="row" id="top-bar">
		<div class="col-sm-4">
		</div>
		<div class="col-sm-4">
		</div>
		<div class="col-sm-4" >
			<h4> Some links </h4>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-2">
		</div>
		<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
		</div>
		<div class="col-sm-4"  id="link-bar">
		</div>
		<div class="col-sm-2">
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12" id="image">
			<img src="header.png" class="img-responsive"/>
		</div>
	</div>
	<div class="wrapper">
		<div class="line"></div>
		<div class="row" >
			<div class="col-sm-2">
			</div>
			<div class="col-sm-8" id="main-content-area">
				<div class="col-sm-12" style="background-color:green">
				<h3>Welcome </h3>
				</div>
				<div class="row">
				<div class="col-sm-4">
					<img src="me.jpg" class="img-responsive"/>
				</div>
				<div class="col-sm-4">
					<img src="me.jpg" class="img-responsive"/>
				</div>
				<div class="col-sm-4">
					<img src="me.jpg" class="img-responsive"/>
				</div>
				</div>
				<div class="row">
					<div class="col-sm-4">
						<img src="me.jpg" class="img-responsive"/>
					</div>
					<div class="col-sm-4">
						<img src="me.jpg" class="img-responsive"/>
					</div>
					<div class="col-sm-4">
						<img src="me.jpg" class="img-responsive"/>
					</div>
				</div>
			</div>
			<div class="halfshadow"></div>
			<div class="col-sm-2" >
			</div>
		</div>
	</div>
	<div class="row" id="footer">
		<div class="col-sm-12">
			<div class="col-sm-6">
				<h4>some text........</h4>
			</div>
			<div class="col-sm-6">
			<	h4>some link </h4>
			</div>
		</div>
	</div>	    
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题