zoukankan      html  css  js  c++  java
  • border :before :after 的应用

    BORDER BEFORE AFTER

            .head_list li{color:#4E4D52;position:relative;float:left;height:30px;background:-webkit-linear-gradient(top, #f2f2f2, #E6E6E6, #d1d1d1) #E6E6E6;border-right:1px solid #dbdbdb;133px;text-align:center;line-height:30px;font-size:14px;display:block;}
            .no_border{border:none !important;}
            .head_list li .on{z-index: 1;top: -5px;left: 0px; 133px;line-height:40px;height: 34px;position: absolute;color: #FFF;background:#574187;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);
            -ms-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);}
            .head_list li .on:before{content: '';z-index: 1;height: 3px;position: absolute;top: -3px;right: -3px;border- 0px 3px 4px 0px;border-style: solid;border-color: rgba(66, 48, 110, 0)rgba(66, 48, 110, 0) #42306E #42306E;}
            .head_list li .on:after{content: ''; 0px;height: 1px;position: absolute;top: -1px;left: -3px;border- 0px 0px 4px 3px;border-style: solid;border-color: rgba(66, 48, 110, 0) #42306E #42306E rgba(66, 48, 110, 0);}
    • 热门促销
    • 快餐
    • 西餐
    • 面包甜点
    • 自助餐
  • 相关阅读:
    BOM操作
    重绘和回流
    css3动画 --- Transition
    css3动画 --- Animation
    flex布局
    读书笔记之python深入面向对象编程
    读书笔记之python面向对象编程的四大支柱
    git基础使用01
    python读取列表中的每个数据,@DDT,@Data(*data),@unpack使用
    python单元测试_读取excel表中的数据
  • 原文地址:https://www.cnblogs.com/2boy/p/3039936.html
Copyright © 2011-2022 走看看