纯css导航滚动阴影

àì夳堔傛蜴生んèń 2024-04-07 12:26 118阅读 0赞 
  1. body {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         .header {
  8.             position: sticky;
  9.             background: #fff;
  10.             top: 0;
  11.             font-size: 20px;
  12.             height:50px;
  13.             z-index: 1;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.         }
  18.         .shadow::before {
  20.             content: '';
  21.             box-shadow: 0 0 10px 1px #333;
  22.             position: fixed;
  23.             width: 100%;
  24.         }
  25.         .shadow::after {
  27.             content: '';
  28.             width: 100%;
  29.             height: 20px;
  30.             background: linear-gradient(to bottom, #fff 50%, transparent);
  31.             position: absolute;
  32.         }
  33.         .main {
  35.             height:1000px;
  36.             padding:20px 10px 10px 10px;
  37.         }
  39. <div class="header">不忘初心，方得始终</div>
  40.     <div class="shadow"></div>
  41.     <div class="main">
  42.         林扬生
  43.     </div>

See the Pen 纯css导航滚动阴影 by qianhuiya ( @quinhua) on CodePen.

发表评论

表情：
评论列表 （有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css 阴影

    盒子阴影 (1)前两个方向阴影必写 (2)默认为阴影向外 (3)可通过，逗号设置多个方向阴影:npx npx nxp 颜色,npx npx

    痛定思痛。痛定思痛。/ 0 赞/ 584 阅读