css如何设置盒子的边框阴影不遮盖它下面的内容

发布网友发布时间：2022-04-20 04:07

共2个回答

热心网友时间：2022-04-06 12:07

不遮盖它下面的内容，你说的是这样的效果吗

<!DOCTYPE html>
<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值就可以了。

首页

文章

css如何设置盒子的边框阴影不遮盖它下面的内容