css如何设置盒子的边框阴影不遮盖它下面的内容
发布网友
发布时间：2022-04-20 04:07
共2个回答
热心网友
时间：2022-04-06 12:07
不遮盖它下面的内容，你说的是这样的效果吗
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
li {
list-style: none;
}
.box {
height: 50px;
}
.box ul {}
.box ul li {
float: left;
background: #3695D5;
width: 50px;
height: 35px;
line-height: 35px;
text-align: center;
box-shadow: 3px 5px 16px 3px #000000;
/*阴影左右平移,上下平移,模糊距离,阴影尺寸,阴影颜色*/
margin: 10px;
cursor: pointer;
}
.box ul li:active {
box-shadow: 3px 5px 16px 3px #000000 inset;
}
.demo {
border: 1px solid #000000;
width: 350px;
height: 150px;
}
</style>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="demo">
</div>
</body>
</html>
热心网友
时间：2022-04-06 13:25
盒子的阴影是不占有网页的空间的，所以你只要给margin值就可以了。
