css3 文字倒影 webkit-box-reflect

最新推荐文章于 2025-05-19 09:06:42 发布

STIVEN11

最新推荐文章于 2025-05-19 09:06:42 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/qq_39710367/article/details/118381833

H5 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8" />
       <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      </head>
      <style type="text/css">

 div{
      font-size: 72px;
      font-weight: bold;
      color: red;
      float: left;
      width: 645px;
      -webkit-box-reflect: below -28px
      -webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));
}

</style>
<body  style="background-color: #eee">
      
 <div class="row row1">
    <div style="width: 100vw" class="erp">倒影文字，一发入魂</div>
</div>
</body>
</html>

主要属性 webkit-box-reflect

最后效果