css中文本渐变倒影 |css 继承错误

.text {
font-size: 48px;
background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.5)));
}

代码中使用了background-clip属性将背景设置成文本的形状，再使用text-fill-color将文本的颜色设置为透明，这样文本就不会显示出来。接着，使用webkit-box-reflect属性给文本设置一个倒影，其中below表示倒影在文本下方，0px表示间距为0，-webkit-gradient是倒影的颜色渐变。

需要注意的是，该效果只支持webkit内核的浏览器，包括Chrome、Safari等，并且在一些低版本的浏览器中可能会出现兼容性问题。

总之，CSS文本渐变倒影是一个简单而美观的效果，适用于一些文艺风格的网站设计。使用上述代码，大家可以轻松实现这一效果。