zoukankan      html  css  js  c++  java
  • 外圆角选项卡

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .tab-x {
                    display: flex;
                    flex-direction: row-reverse;
                    justify-content: flex-end;
                    padding-left: 20px;
                    border-bottom: 1px solid rgba(0, 0, 0, .1);
                }
                
                .tab-a {
                    --backgroundColor: #fff;
                    background-color: var(--backgroundColor);
                    line-height: 20px;
                    padding: 10px 20px;
                    border-radius: 16px 16px 0 0;
                    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, .1));
                    position: relative;
                }
                /* 创建外侧圆弧 */
                
                .tab-a::before,
                .tab-a::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                     16px;
                    height: 16px;
                }
                
                .tab-a::before {
                    background: radial-gradient(circle at 0 0, transparent, transparent 16px, var(--backgroundColor) 17px);
                    right: 100%;
                }
                
                .tab-a::after {
                    background: radial-gradient(circle at 100% 0, transparent, transparent 16px, var(--backgroundColor) 17px);
                    left: 100%;
                }
                
                .tab-a.active {
                    --backgroundColor: teal;
                    color: #fff;
                    z-index: 1;
                }
            </style>
        </head>
    
        <body>
            <div class="tab-x">
                <a href="javascript:" class="tab-a">选项卡3</a>
                <a href="javascript:" class="tab-a">选项卡2</a>
                <a href="javascript:" class="tab-a active">选项卡1</a>
            </div>
        </body>
    
    </html>

    效果图:

  • 相关阅读:
    Java中的位运算符、移位运算符
    数据结构——树
    Java Collections工具类
    Map集合
    博客园插入bilibili视频
    TreeSet练习 根据字符串长度排序
    Java Set集合
    规划极限编程读后感(3)
    规划极限编程读后感(2)
    规划极限编程读后感(1)
  • 原文地址:https://www.cnblogs.com/150536FBB/p/11732626.html
Copyright © 2011-2022 走看看