zoukankan      html  css  js  c++  java
  • before和after的样式符号

    刷新:

    .widgets__icon_refresh{
        display:block;
        float:left;
        position:relative;
        width:16px;
        height:16px;
        padding:2px;
        border: 4px solid transparent;
        cursor:pointer;
    }
    
    .widgets__icon_refresh:before{
        position:absolute;
        content:"";
        display:block;
        width:calc(100% - 4px);
        height:calc(100% - 4px);
        border-radius:100%;
        border:2px solid #a7a7a7;
        border-top:2px solid transparent;
        -webkit-transform: rotate(45deg);
    }
    .widgets__icon_refresh:after{
        position:absolute;
        content:"";
        display:block;
        border: 7px solid transparent;
        border-left: 7px solid #a7a7a7;
        left:50%;
        top:-3.5px;
    }

    叉号:

    .widgets__icon_close{
        display:block;
        float:right;
        position:relative;
        width:16px;
        height:16px;
        border: 4px solid transparent;
        cursor:pointer;
    }
    
    .widgets__icon_close:before{
        position:absolute;
        content:"";
        display:block;
        width:1px;
        height:21px;
        border-right:2px solid #a7a7a7;
        -webkit-transform: rotate(135deg);
    }
    .widgets__icon_close:after{
        position:absolute;
        content:"";
        display:block;
        width:1px;
        height:21px;
        border-right:2px solid #a7a7a7;
        -webkit-transform: rotate(45deg);
    }

    注意:135+45=180度

  • 相关阅读:
    jquery插件treetable使用
    WPF界面按钮美化
    Nginx配置
    Spring Framework之AOP
    IOS抓取与反抓取
    Spring Framework之事务管理
    68- 二叉树的最近公共祖先
    Spring Framework之IoC容器
    应试教育引发的思考
    春季实习生校园招聘总结
  • 原文地址:https://www.cnblogs.com/liufeiran/p/12850046.html
Copyright © 2011-2022 走看看