.wrapper::after {
content: '';
height: 10px;
width: 269px;
background-color: #BAA496;
}
.wrapper {
margin: 30px auto 0;
width: 305px;
height: 541px;
background: linear-gradient(to right, #CFD0BE 0%,#A2896B 5%,#F8F8F0 7%,#E3DBC6 50%, #F8F8F0 93%,#A2896B 95%,#CFD0BE 100%);
/* border-top: 1px solid #BAA496; */
/* border-bottom: 1px solid #BAA496; */
/* box-sizing: border-box; */
}
.main {
margin: 7px auto 0;
width: 258px;
height: 473px;
background-color: #252026;
border-radius: 10px;
}
=
css
1. position: relative;
2. margin: 30px auto 0;
3. width: 305px;
4. height: 541px;
5. background: linear-gradient(to right, #CFD0BE 0%,#A2896B 5%,#F8F8F0 7%,#E3DBC6 50%, #F8F8F093%,#A2896B 95%,#CFD0BE 100%);
6. box-shadow: 0px 0px 14px 9px rgba(186,164,150,.1);
.wrapper::after {
1. position: absolute;
2. left: 50%;
3. transform: translateX(-50%);
4. bottom: 0px;
5. content: '';
6. height: 11px;
7. width: 304px;
8. background: linear-gradient(to right, #CFD0BE 0%,#A2896B 5%,#A2896B 95%,#CFD0BE 100%);
9. border-radius: 10px;
}
↑↑↑↑↑↑↑为半终效果,
纯CSS没有图片加持(除了漫步者logo)