纯CSS打造文件上传按钮的虚线边框效果，无需JavaScript或图片！

许多网站需要用户上传文件，而美观的上传区域能提升用户体验。本文将演示如何仅使用CSS，创建带有虚线边框的上传区域样式。

目标样式如图所示（上图），我们只用CSS代码实现。

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