内凹圆带阴影效果要如何实现才好。
3 回答
holdtom
TA贡献1805条经验 获得超10个赞
效果图：
HTML 结构：
<body>
<div class="content-wrap">
<div class="left-icon"></div>
<div class="right-icon"></div>
</div>
</body>CSS样式：（阴影范围题主可以修改）
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #f8f8f8;
}
.content-wrap {
position: relative;
width: 500px;
height: 800px;
background-color: #fff;
box-shadow: 0 0 2px 2px lightgray;
}
.left-icon::before, .right-icon::before {
position: absolute;
content: '';
top: 300px;
width: 40px;
padding: 20px 0;
border-radius: 50%;
box-shadow: 0px 0px 2px 2px lightgray inset;
background-color: #f8f8f8;
}
.left-icon::before {
left: -20px;
}
.right-icon::before {
right: -20px;
}
.left-icon::after, .right-icon::after {
position: absolute;
top: 300px;
content: '';
width: 20px;
height: 40px;
background-color: #f8f8f8;
}
.left-icon::after {
left: -22px;
}
.right-icon::after {
right: -22px;
}- 3 回答
- 0 关注
- 2948 浏览
添加回答
举报
0/150
提交
取消