背景色实现按钮分隔线

Posted 2020-10-12 湘陵

分割线效果如下

思路：

　　通过设置渐变背景色(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