CSS水中倒影 |css关键属性

/* 1. 给需要实现水中倒影的元素设置一个相对定位 */
.container {
position: relative;
}
/* 2. 给需要实现水中倒影的元素添加伪元素，使用绝对定位 */
.container::before {
content: "";
position: absolute;
bottom: -10px; /* 负数即可呈现出倒影效果（可以根据实际情况调整）*/
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
transform: scaleY(-1); /* 垂直翻转 */
}
/* 3. 确认容器元素和伪元素高度一致 */
.container {
height: 500px;
}
.container::before {
height: 250px;
}

以上是CSS实现水中倒影的关键代码。首先给需要实现效果的元素设置一个相对定位，然后添加一个伪元素，使用绝对定位并将其偏移到容器元素下方。接着给伪元素设置高度和背景颜色，其中颜色需要使用线性渐变（linear-gradient），控制颜色的透明度实现逐渐淡化的效果。最后使用 transform 属性垂直翻转伪元素，即可完成水中倒影效果。