• 背景色实现按钮分隔线


    分割线效果如下

    思路:

      通过设置渐变背景色(top,white,white)的位置(垂直居中,水平居右)和宽度(2px)、高度(80%)

      最后一个按钮的背景色设为none,即可现按钮的分割线

    示例代码

      CSS:

    ul{display: flex; display:-webkit-flex; max-width:600px; margin:auto; background:lightblue; text-align:center; padding:0px;}
    ul li{flex:1; -webkit-flex:1; list-style:none; background:linear-gradient(top,white,white); background:-webkit-linear-gradient(top,white,white); background:-moz-linear-gradient(top,white,white); background:-ms-linear-gradient(top,white,white); background:-o-linear-gradient(top,white,white); background-size:2px 80%; background-position:center right; background-repeat: no-repeat; line-height:60px;}
    ul li:last-child{background:none;}

      HTML:

    <ul>
        <li>TAG FIRST</li>
        <li>TAG SECOND</li>
        <li>TAG THIRD</li>
    </ul>

    在线演示:http://sandbox.runjs.cn/show/3xw6c1ba

  • 相关阅读:
    邪恶的强制数据转换
    知识普及
    判断是否为一个数字
    parseInt
    webpack学习记录
    数组隐藏属性
    elasticSearch基本使用
    elasticsearch安装和部署
    neo4j索引
    spark yarn 提交作业
  • 原文地址:https://www.cnblogs.com/chenxiangling/p/7753370.html
Copyright © 2020-2023  润新知