zoukankan      html  css  js  c++  java
  • css3制作梯形导航

    /*HTML*/
    <
    div class="nav"> <a href="javascript:;">首页</a> <a href="javascript:;" class="active">项目</a> <a href="javascript:;">关于</a> </div>
    /*CSS*/
    .nav a {
      position: relative;
      padding: .5em 1em .35em;
      display: inline-block;
      color: #fff;
      width: 60px;
      margin-left: -20px;
      text-align: center;
    }
    .nav a:first-child {
      margin-left: 0;
    }
    .nav a::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: #58a;
        border: 1px solid rgba(0,0,0,.4);
        border-bottom: none;
        border-radius: .5em .5em 0 0;
        box-shadow: 0 .15em white inset;
        transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
        transform-origin: bottom left; /* 控制倾斜的方向 */
       /*  transform-origin: bottom right; */
    }
    .nav .active {
      z-index: 1;
    }
    .nav a.active::before {
      background: #55a;
    }

    效果图

  • 相关阅读:
    多线程中注意事项
    多线程实现第三种方式
    线程池《一》
    线程组
    线程间通信注意的问题
    互斥锁
    多个线程通信的问题
    二个线程间的通信
    死锁产生的原理
    线程安全问题
  • 原文地址:https://www.cnblogs.com/wei-dong/p/6184396.html
Copyright © 2011-2022 走看看