前些日子接到一个小需求（见下图）
我看了一眼，想了几秒钟，这玩意不就是 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>
小结：很基础的css，利用 linear-gradient 来实现类似 下划线的样式，基础很重要，不要为了盲目的追求新技术而不去扎实基础 ~ 加油！各位小伙伴！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
