纯CSS实现Tab页签样式

戏码台 2021-05-25

1433

目标结果如图：

实现代码：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现Tab页签样式</title>
    <style type="text/css">
        body {
            padding: 40px;
            font: 130%/2 Frutiger LT Std, sans-serif;
        }

        nav {
            position: relative;
            z-index: 1;
            padding-left: 1em;
        }

        nav > a {
            position: relative;
            display: inline-block;
            padding: .3em 1em 0;
            color: inherit;
            text-decoration: none;
            margin: 0 -.3em;
        }

        nav > a::before,
        main {
            border: .1em solid rgba(0, 0, 0, .4);
        }

        nav a::before {
            content: ''; /* To generate the box */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            border-bottom: none;
            border-radius: .5em .5em 0 0;
            background: #ccc linear-gradient(hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, 0));
            box-shadow: 0 .15em white inset;
            transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
            transform-origin: bottom;
        }

        nav a.selected {
            z-index: 2;
        }

        nav a.selected::before {
            background-color: #eee;
            margin-bottom: -.08em;
        }

        main {
            display: block;
            margin-bottom: 1em;
            background: #eee;
            padding: 1em;
            border-radius: .15em;
        }


    </style>
</head>
<body>

<nav>
    <a href="#">Home</a>
    <a href="#" class="selected">Projects</a>
    <a href="#">About</a>
</nav>
<main>
    Content area
</main>

</body>
</html>

复制

参考：《CSS揭秘》74页

数据库

文章转载自戏码台，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

纯CSS实现Tab页签样式

评论

相关阅读