css圆波浪线边框 |css中图片放大镜

/* 定义波浪线边框的样式 */
.wave-border {
position: relative;  /* 设置边框相对定位 */
padding: 10px;  /* 添加内边距使得边框不会覆盖内容 */
border: none;  /* 取消原有边框 */
overflow: hidden;  /* 隐藏多余的边框 */
}
/* 定义波浪线的样式 */
.wave-border::before {
content: "";  /* 添加伪元素 */
position: absolute;  /* 设置伪元素相对定位 */
top: -10px;  /* 将波浪线设置在原有边框之外 */
left: 0;
right: 0;
bottom: 0;
background: transparent;  /* 设置背景颜色为透明 */
z-index: -1;  /* 将伪元素设置在最下面 */
transform: skewY(-12deg);  /* 倾斜45度 */
}
/* 定义波浪线的样式 */
.wave-border::after {
content: "";  /* 添加伪元素 */
position: absolute;  /* 设置伪元素相对定位 */
top: -10px;  /* 将波浪线设置在原有边框之外 */
left: 0;
right: 0;
bottom: 0;
background: transparent;  /* 设置背景颜色为透明 */
z-index: -1;  /* 将伪元素设置在最下面 */
transform: skewY(12deg); /* 倾斜45度 */
}

以上就是实现波浪线边框的关键代码。大家通过设置相对定位和添加伪元素，实现了波浪线的效果，通过设置多个波浪线，可以得到更加生动有趣的效果。