前些日子接到一个小需求(见下图)
![一个很常见的获取验证码的功能](https://i-blog.csdnimg.cn/blog_migrate/f190c22ca0be9f0f63a465ac04b58d8d.png)
我看了一眼,想了几秒钟,这玩意不就是 border-bottom:dashed 嘛,然后我就咔咔咔上代码,就变成下面这样了。
![我吐了,我顿时感觉我好菜](https://i-blog.csdnimg.cn/blog_migrate/cf4fa70ad4414aa9195b1066506591b0.png)
敲完后我就感觉自己有很蠢,肯定不是这样实现的。然后我就想了一下,因为右边的按钮是需要用到渐变的,恰巧左边的下划线也能用渐变实现。东西想通之后那就也是咔咔咔几下的事情了。
.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 来实现类似 下划线的样式,基础很重要,不要为了盲目的追求新技术而不去扎实基础 ~ 加油!各位小伙伴!