html+圆的阴影效果,css如何实现内凹圆阴影效果

holdtom

效果图：

HTML 结构：

CSS样式：(阴影范围题主可以修改)

* {

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;

}