纯css导航滚动阴影

àì夳堔傛蜴生んèń 2024-04-07 12:26 82阅读 0赞

body {
        
                margin: 0;
                padding: 0;
            }
            .header {
        
                position: sticky;
                background: #fff;
                top: 0;
                font-size: 20px;
                height:50px;
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .shadow::before {
        
                content: '';
                box-shadow: 0 0 10px 1px #333;
                position: fixed;
                width: 100%;
            }
            .shadow::after {
        
                content: '';
                width: 100%;
                height: 20px;
                background: linear-gradient(to bottom, #fff 50%, transparent);
                position: absolute;
            }
            .main {
        
                height:1000px;
                padding:20px 10px 10px 10px;
            }

<div class="header">不忘初心，方得始终</div>
        <div class="shadow"></div>
        <div class="main">
            林扬生
        </div>

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

[_css]: https://codepen.io/quinhua/pen/xxWBEBg
[quinhua]: https://codepen.io/quinhua
[CodePen]: https://codepen.io

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

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

相关阅读

相关纯css导航滚动阴影

body { margin: 0; padding: 0; }

àì夳堔傛蜴生んèń/ 2024年04月07日 12:26/ 0 赞/ 83 阅读

相关 CSS实现移动端横向滚动导航条，仿今日头条滚动导航

应用场景现在很多移动端的横向导航都是实现了滚动效果，我们先来看几个案例：今日头条 ![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29t

爱被打了一巴掌/ 2023年07月25日 08:44/ 0 赞/ 26 阅读

相关设置css阴影和取消css阴影

之前用mui布局样式，但是一直都会有这个阴影，在浏览器调试也调试没用 ![在这里插入图片描述][20191010172507832.png] 这是设置阴影 /

雨点打透心脏的1/2处/ 2023年06月06日 08:16/ 0 赞/ 38 阅读

相关震惊！纯 CSS 的导航栏切换方案

本文是非常有意思的一篇文章，介绍了 CSS 中，非常强大的一个知识点：如何通过点击某个元素，控制其他元素~ 不用 `Javascript`，使用纯 `CSS` 方案，实现

亦凉/ 2022年11月14日 13:16/ 0 赞/ 205 阅读

相关纯CSS视差滚动

参考旭哥的：[http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/][http_www.z

ゝ一世哀愁。/ 2022年09月23日 13:51/ 0 赞/ 290 阅读

相关横向滚动条导航的实现（纯css）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

水深无声/ 2022年09月05日 12:53/ 0 赞/ 305 阅读

相关纯CSS实现面包屑式导航

参照着[教程][Link 1]做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图： ![221956386835074.jpg][]

柔光的暖阳◎/ 2022年08月06日 12:24/ 0 赞/ 265 阅读

相关纯css，div隐藏滚动条，保留鼠标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容

浅浅的花香味﹌/ 2022年06月04日 05:11/ 0 赞/ 315 阅读

相关纯CSS/CSS3 导航合集（原创）

> 小编自己的个人原创纯CSS CSS3水平导航合集导航一：源码地址：[http://www.jq22.com/jquery-info20013][http_www

怼烎@/ 2022年02月13日 08:07/ 0 赞/ 187 阅读

相关 css 阴影

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

痛定思痛。/ 2021年07月24日 12:07/ 0 赞/ 524 阅读