求文字渐隐倒影效果的规则 - sigil吧

level 5

泪染窗纱楼主

大佬们，求如图那样的文字渐隐倒影效果的规则啊，能支持多看APP的，在线求。我摘下来的webkit−box−reflect规则多看不支持。

2026年09月22日 09点09分 1

level 5

泪染窗纱楼主

2026年09月22日 09点09分 2

level 12

Fdoge

感觉css是弄不了的，现在没多少阅读器支持这玩意。
如果数量不多，就去ps里弄成图片再插入吧

2026年09月25日 01点09分 3

泪染窗纱

现在就koodo的电脑和手机端支持这种效果，其他APP一概不显示，就连那电子书导出PDF都没有倒影效果。

2026年09月25日 02点09分

Fdoge

@泪染窗纱它那个是基于浏览器的，能支持这种css3的样式。多看还有静读天下之类的就不太支持

2026年09月25日 02点09分

泪染窗纱

@Fdoge 可惜了这种效果，用在电子书多好

2026年09月25日 06点09分

level 7

里斯卡

肯定支持不了啊，厂商前缀 -webkit，也就是说这个属性只有 Chrome 这种 WebKit/Blink 内核的浏览器才能识别，别的浏览器直接就会跳过。

2026年10月01日 03点10分 4

泪染窗纱

有其他代码规则能在APP上实现这个效果不

2026年10月01日 04点10分

里斯卡

@泪染窗纱有，伪元素也可以做出同样的效果。不过阅读器也同样不支持伪元素。 .reflect-text { position: relative; display: inline-block; font-size: 48px; } .reflect-text::after { content: attr(data-text); position: absolute; left: 0; top: 100%; transform: scaleY(-1) translateY(-48px); transform-origin: top; opacity: 0.35; pointer-events: none; mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3) 80%); }

2026年10月01日 07点10分

里斯卡

@泪染窗纱当然了，如果你真的那么执着的话，有一个办法是100%可以的。假设你要给标题做倒影效果。你就把标题里的文本弄个div的副本，然后给这个副本套个倒影的样式就可以了。这个方法用正则做的话很方便，但怎么看都是觉得有点闲得蛋疼。

2026年10月01日 07点10分

泪染窗纱

@里斯卡看来是挺繁琐，那就不搞了，反正也不是非要不可哈哈

2026年10月01日 07点10分