首先看下遇到的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子</title>
<style>
.big_box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 600px;
height: 500px;
background-color: #87CEEB;
}
.header{
width: 100%;
height: 80px;
background-color: #CD853F;
border: 1px solid #E6E6FA;//这根线只是做下区分
}
.body{
display: flex;
justify-content: space-between;
width: 100%;
height: 420px;
}
.box{
width:150px;
height: 420px;
background-color: #CD853F;
}
</style>
</head>
<body>
<div class="big_box">
<div class="header">
头部盒子
</div>
<div class="body">
<div class="box right">左边盒子</div>
<div class="box right">右边盒子</div>
</div>
</div>
</body>
</html>
上面代码在浏览器中展示如下图
解决思路：
- 在头部给盒子添加2个下边框阴影盒子（盒子宽度和左右两边盒子相同）
- 这样出现的现象是如下图2-1
- 解决这个问题就是增加遮罩层（宽度大于阴影盒子宽度）如图2-2（利用定位定在2边）
图2-1的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子</title>
<style>
.big_box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 600px;
height: 500px;
background-color: #87CEEB;
}
.header {
display: flex;
position: relative;
justify-content: space-between;
width: 100%;
height: 80px;
background-color: #CD853F;
}
.shodow_box_a,
.shodow_box_b {
width: 150px;
height: 100%;
/* 提高层级 */
z-index: 2;
box-shadow: 0 4px 30px #D2B48C;
}
.body {
display: flex;
justify-content: space-between;
width: 100%;
height: 420px;
}
.box {
width: 150px;
height: 420px;
background-color: #CD853F;
}
</style>
</head>
<body>
<div class="big_box">
<div class="header">
<!-- 添加阴影盒子 -->
<div class="shodow_box_a"></div>
<div class="shodow_box_b"></div>
</div>
<div class="body">
<div class="box right"></div>
<div class="box right"></div>
</div>
</div>
</body>
</html>
2-1
图2-2的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子</title>
<style>
.big_box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 600px;
height: 500px;
background-color: #87CEEB;
}
.header {
display: flex;
position: relative;
justify-content: space-between;
width: 100%;
height: 80px;
background-color: #CD853F;
}
.shodow_box_a,
.shodow_box_b {
width: 150px;
height: 100%;
/* 提高层级 */
z-index: 2;
box-shadow: 0 4px 30px #D2B48C;
}
/* 盖住出现的左右阴影 */
.mask_box_l,
.mask_box_r{
position: absolute;
top: 0;
/* 这个宽度阴影盒子是150+模糊距离30的得来的 */
width: 180px;
height: 100%;
background-color: #CD853F;
z-index: 3;
}
.mask_box_l{
left: 0;
}
.mask_box_r{
right: 0;
}
.body {
display: flex;
justify-content: space-between;
width: 100%;
height: 420px;
}
.box {
width: 150px;
height: 420px;
background-color: #CD853F;
}
</style>
</head>
<body>
<div class="big_box">
<div class="header">
<!-- 添加阴影盒子 -->
<div class="shodow_box_a"></div>
<div class="shodow_box_b"></div>
<!-- 添加遮罩层盒子 -->
<div class="mask_box_l"></div>
<div class="mask_box_r"></div>
</div>
<div class="body">
<div class="box right"></div>
<div class="box right"></div>
</div>
</div>
</body>
</html>
2-2