纯CSS打造文件上传按钮的虚线边框效果，无需JavaScript或图片！
许多网站需要用户上传文件，而美观的上传区域能提升用户体验。本文将演示如何仅使用CSS，创建带有虚线边框的上传区域样式。
目标样式如图所示（上图），我们只用CSS代码实现。
利用CSS线性渐变，巧妙叠加两个渐变，模拟出虚线边框效果。
立即学习“前端免费学习笔记（深入）”；
以下CSS代码创建一个80x80像素的带灰色虚线边框的正方形：
label {
display: block;
width: 80px;
height: 80px;
border: 1px dashed #ccc;
background: linear-gradient(#ccc, #ccc) center/40px 4px no-repeat,
linear-gradient(#ccc, #ccc) center/4px 40px no-repeat;
}
border: 1px dashed #ccc; 创建基本的虚线边框。两个linear-gradient分别创建水平和垂直细线。center/40px 4px 和 center/4px 40px 控制虚线的长度和间距，no-repeat 确保渐变只出现一次。 您可以调整width、height和颜色值来改变样式大小和颜色。 最终效果与目标样式一致（上图）。 通过此方法，我们用纯CSS实现了文件上传区域的样式。
