CSS：圆角tab

weixin_30916125

于 2017-06-15 20:59:00 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

文章标签： c/c++

原文链接：http://www.cnblogs.com/mudeng-007/p/7020025.html

本文介绍了一种使用 CSS3 实现的 3D tab 导航效果，通过简单的 HTML 结构配合 CSS3 的渐变、阴影及透视等属性，实现了立体感十足的 tab 切换样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.tab .item{position: relative;display: inline-block;padding: .5em 1em .35em;color: white;}
.tab .item::before{content:'';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index:-1;background: #ccc;
    background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);border-bottom: none;border-radius:.5em .5em 0 0;box-shadow: 0 .15em white inset;
    transform: perspective(.5em) rotateX(5deg);transform-origin:bottom left;
}
.content{background: #ccc; border: 1px solid rgba(0,0,0,.4);width:300px;height: 150px;}

<div class="tab">
  <div class="item">tab1</div>
  <div class="item">tab2</div>
  <div class="item">tab3</div>
</div>
<div class="content"></div>

转载于:https://www.cnblogs.com/mudeng-007/p/7020025.html