当前位置：首页 > CSS

css制作倒影

2026-02-13 01:12:40CSS

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

通过 -webkit-box-reflect 可以快速为元素创建倒影效果。该属性支持调整倒影的方向、距离和遮罩效果。

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

below 表示倒影位于元素下方，还可使用 above、left、right。
10px 控制倒影与元素的间距。
linear-gradient 用于渐变遮罩，避免倒影生硬。

通过伪元素模拟倒影

若需兼容非 WebKit 浏览器，可通过伪元素手动实现倒影：

.reflect-container {
    position: relative;
    height: 200px; /* 包含倒影的总高度 */
}

.reflect-content {
    height: 100px; /* 原始内容高度 */
}

.reflect-content::after {
    content: "";
    position: absolute;
    top: 100%; /* 置于元素下方 */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)), 
                url("元素背景或图片路径");
    transform: scaleY(-1); /* 垂直翻转 */
    opacity: 0.5;
}

结合 `transform` 与滤镜

通过 scale 翻转配合滤镜增强效果：

.reflect {
    position: relative;
}

.reflect::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    height: 20%; /* 倒影高度比例 */
    background: inherit;
    transform: scaleY(-1);
    filter: blur(2px) opacity(0.6);
}

blur 增加模糊效果。
opacity 调整透明度使倒影更自然。

SVG 实现动态倒影

SVG 适用于复杂图形的倒影，尤其是动画场景：

css制作倒影

<svg width="200" height="200">
    <defs>
        <filter id="reflect-filter">
            <feGaussianBlur stdDeviation="1" />
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.5" />
            </feComponentTransfer>
        </filter>
    </defs>
    <use xlink:href="#target" transform="scale(1, -1)" y="-200" filter="url(#reflect-filter)" />
</svg>