css百褶窗效果 |css div左边距

/* 首先，大家需要将元素的背景颜色改为要显示的色彩 */
.element {
background-color: #fff;
}
/* 接着，设置元素为相对定位，并添加伪元素before和after作为百褶的边缘 */
.element:before,
.element:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 50%; /* 高度设置为元素高度的一半，以达到交错装饰效果 */
z-index: -1; /* 将百褶边缘置于元素下方 */
background-color: #fff; /* 将边缘颜色设置为元素背景色 */
}
/* 对before和after分别设置不同的top值，实现交错的效果 */
.element:before {
top: 0;
}
.element:after {
top: 50%; /* top值等于元素高度的一半，以让后一个百褶边缘从元素中间位置开始 */
}
/* 最后，将元素的所有子元素的z-index设为2，让其在百褶边缘之上 */
.element * {
z-index: 2;
}

这样，百褶窗效果就完成了！是不是很简单呢？大家只需几行CSS代码就能轻松实现这一效果，大大提升了网页视觉效果。