纯CSS打造美观上传按钮：告别繁琐图片和JS代码！
许多开发者都追求设计出美观易用的上传按钮。本文将演示如何仅使用CSS，就能创建一个类似上图所示的、带有虚线边框和交叉渐变线的上传区域。
关键在于巧妙运用CSS线性渐变（linear-gradient）。通过叠加两个线性渐变，即可轻松实现交叉虚线效果。
以下CSS代码实现该效果：
立即学习“前端免费学习笔记（深入）”；
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;
}
代码解释：
-
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;创建垂直方向的短虚线。 两者叠加形成交叉效果。 -
center/40px 4px和center/4px 40px控制渐变线的长度、宽度、位置和重复方式。
-
您可以调整 width、height 和颜色值来定制按钮大小和外观。 下图展示了效果：
(此处应插入问题答案中提供的图片)
无需图片或JavaScript，仅用简洁的CSS代码，即可轻松创建美观实用的上传按钮，方便开发者修改和定制。
