当前位置：首页 > CSS

css制作倒影

2026-01-28 06:48:11CSS

使用 `-webkit-box-reflect` 属性

通过 CSS 的 -webkit-box-reflect 属性可以快速为元素创建倒影效果。该属性目前仅在 WebKit 内核浏览器（如 Chrome、Safari）中支持。

.reflect {
    -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0,0,0,0.3));
}

below 10px 表示倒影位于元素下方，距离为 10px。linear-gradient 用于控制倒影的渐变透明度，避免生硬的边缘。

使用伪元素模拟倒影

对于不支持 -webkit-box-reflect 的浏览器，可以通过伪元素和 CSS 变换模拟倒影效果。

.reflect {
    position: relative;
}
.reflect::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.3));
    transform: scaleY(-1);
    opacity: 0.5;
}

通过 transform: scaleY(-1) 垂直翻转伪元素，再通过渐变和透明度调整倒影的视觉效果。

结合 SVG 滤镜

SVG 滤镜可以实现更复杂的倒影效果，包括模糊、扭曲等高级效果。

<svg style="display: none;">
    <filter id="reflection">
        <feGaussianBlur stdDeviation="2"/>
        <feComponentTransfer>
            <feFuncA type="linear" slope="0.5"/>
        </feComponentTransfer>
    </filter>
</svg>

.reflect {
    filter: url(#reflection);
}

倒影动画效果

通过 CSS 动画或过渡，可以让倒影产生动态效果，如波纹或渐变动画。

.reflect:hover::after {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

多浏览器兼容方案

结合 -webkit-box-reflect 和伪元素方法，确保在大多数浏览器中都能显示倒影效果。

.reflect {
    position: relative;
}
.reflect::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.3));
    transform: scaleY(-1);
    opacity: 0.5;
}
@supports (-webkit-box-reflect: below) {
    .reflect::after {
        display: none;
    }
    .reflect {
        -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0,0,0,0.3));
    }
}

css制作倒影