前些日子接到一个小需求（见下图）
我看了一眼，想了几秒钟，这玩意不就是 border-bottom：dashed 嘛，然后我就咔咔咔上代码，就变成下面这样了。
敲完后我就感觉自己有很蠢，肯定不是这样实现的。然后我就想了一下，因为右边的按钮是需要用到渐变的，恰巧左边的下划线也能用渐变实现。东西想通之后那就也是咔咔咔几下的事情了。
.one {width: 300px;margin-top: 200px;margin-left: 470px;height: 10px;background: linear-gradient(to right,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 50px 1px;background-repeat: repeat-x;}button {color: #fff;width: 100px;height: 40px;border-radius: 20px;border: none;outline: none;position: absolute;top: 160px;left: 810px;background: linear-gradient(to right, #955afe, #2299ff);}<body><div class="one"></div><button>获取验证码</button></body>
