纯CSS打造虚线上传按钮：超详细教程

纯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实现了文件上传区域的样式。